vue js vuetify v-select,如何从API访问属性对象

wwwo4jvm  于 2023-08-07  发布在  Vue.js
关注(0)|答案(1)|浏览(159)

我在使用v-select时遇到了困难,我从一个后端API得到了一个对象数组。我想把这些对象渲染到v-select元素中。
这是我的硬币

  1. <v-select
  2. label="Expedition"
  3. :items="expeditions"
  4. item-text="expedition"
  5. :item-value="'deliveryData.expedition'"
  6. class="custom-select-field"
  7. variant="underlined"></v-select>

字符串
但是,它会给予我这样的输出[object Object]
我通常这样编写代码来从API调用数据

  1. <v-textarea
  2. label="Alamat Lengkap"
  3. hint="Full Address"
  4. outlined
  5. required
  6. v-model="users.customerData.fullAddress"></v-textarea>


我试着加了
项目文本:项目文本
但还是不行。
这也是我的一段脚本数据返回代码

  1. data() {
  2. return {
  3. expeditions: [
  4. {
  5. value: "deliveryData.expedition",
  6. },
  7. ],
  8. };


},

gdx19jrr

gdx19jrr1#

v-select当给定一个对象数组items时,期望每个对象至少有两个属性:

  1. text,其值是当用户打开选择下拉菜单时看到的选项的显示文本
  2. value,其值是当选择该选项时分配给v-model(或在@change事件期间发出)的值。
    因此,如果使用这些默认选项,则分配给v-select items的对象数组应采用以下形式
  1. [
  2. {
  3. text: 'Option 1',
  4. value: 'opt1'
  5. },
  6. {
  7. text: 'Option 2',
  8. value: 'opt2'
  9. }
  10. ]

字符串
用户打开v-select时将看到下拉选项“选项1”和“选项2”。当单击其中一个时,值“opt 1”或“opt 2”(分别)是分配/发出的值。
如果你的对象没有text和/或value属性怎么办?如果对象来自API,而您无法控制属性名称,该怎么办?这就是 prop item-textitem-value发挥作用的地方。它们的目的是更改v-select使用的属性名称,而不是textvalue
v-select不会使用text属性来查找下拉标签,而是使用item-text指定的任何属性名称。类似地,item-value用于替换value属性名。
给定一个像这样的对象数组:

  1. items = [
  2. {
  3. expedition: 'Option 1',
  4. exid: 'opt1'
  5. },
  6. {
  7. expedition: 'Option 2',
  8. exid: 'opt2'
  9. }
  10. ]


将它们作为items分配给v-select的方法是如下设置item-textitem-value

  1. <v-select
  2. :items="items"
  3. item-text="expedition"
  4. item-value="exid"
  5. />


对于您的特定问题,您的对象只有一个value属性,没有其他属性。您应该确保添加text(或与item-text prop一起使用的其他属性),以便v-select在UI中标记选项。

展开查看全部

相关问题