我在使用v-select时遇到了困难，我从一个后端API得到了一个对象数组。我想把这些对象渲染到v-select元素中。
这是我的硬币
<v-select
label="Expedition"
:items="expeditions"
item-text="expedition"
:item-value="'deliveryData.expedition'"
class="custom-select-field"
variant="underlined"></v-select>字符串
但是，它会给予我这样的输出[object Object]
我通常这样编写代码来从API调用数据
<v-textarea
label="Alamat Lengkap"
hint="Full Address"
outlined
required
v-model="users.customerData.fullAddress"></v-textarea>型
我试着加了
项目文本：项目文本
但还是不行。
这也是我的一段脚本数据返回代码
data() {
return {
expeditions: [
{
value: "deliveryData.expedition",
},
],
};型
}，
1条答案
按热度按时间gdx19jrr1#
v-select当给定一个对象数组
items时，期望每个对象至少有两个属性：text，其值是当用户打开选择下拉菜单时看到的选项的显示文本value，其值是当选择该选项时分配给v-model（或在@change事件期间发出）的值。因此，如果使用这些默认选项，则分配给v-select
items的对象数组应采用以下形式字符串
用户打开v-select时将看到下拉选项“选项1”和“选项2”。当单击其中一个时，值“opt 1”或“opt 2”（分别）是分配/发出的值。
如果你的对象没有
text和/或value属性怎么办？如果对象来自API，而您无法控制属性名称，该怎么办？这就是 propitem-text和item-value发挥作用的地方。它们的目的是更改v-select使用的属性名称，而不是text和value。v-select不会使用
text属性来查找下拉标签，而是使用item-text指定的任何属性名称。类似地，item-value用于替换value属性名。给定一个像这样的对象数组：
型
将它们作为
items分配给v-select的方法是如下设置item-text和item-value：型
对于您的特定问题，您的对象只有一个
value属性，没有其他属性。您应该确保添加text（或与item-textprop一起使用的其他属性），以便v-select在UI中标记选项。