Vuejs Vuetify 如何在 v-select 中访问对象的属性

Posted 2023-02-16

【中文标题】Vuejs Vuetify 如何在 v-select 中访问对象的属性

【英文标题】：Vuejs Vuetify how to access properties of object in v-select

【发布时间】：2018-12-20 03:57:41

【问题描述】：

我的用例。

我从后端 api 获得了一组对象。 我想在v-select 中渲染这些对象

这是我的代码。

<v-select
  :items="categories"
  name="category"
  label="Select a category"
  v-model="category"
  v-validate="'required'">
</v-select>

但它给了我输出。

但我希望对象名称属性显示在 v-select

我们会在 vanilla Vue.js 中这样做

<li v-for="cat in categories" :key="cat.name">cat.name</li>

但是在 vuetify 中我们无法做到这一点。

:items="categories.name"

Vuetify 文档

可以是对象数组或字符串数​​组。使用对象时， 将查找文本和值字段。这可以使用 item-text 和 item-value 属性。

item-text 和 item-value 的实际含义 如何使用item-text 实现这一目标

【问题讨论】：

How to load Array Data into Vuetify Select Input的可能重复

【参考方案1】：

你的分类有name属性，你可以传给item-text：

    <v-select
      :items="categories"
      v-model="category"
      name="category"
      v-validate="'required'"
      item-text="name"
      label="Select a category"
      />

【讨论】：

这样，选择显示要显示的文本，但模型将唯一的文本作为值而不是整个对象；如果我想将整个对象作为模型的值，该怎么办？

【参考方案2】：

我在 codepen 上的一个示例中看到了类似的解决方案，但由于某种原因，仅将“名称”分配给我的项目文本是行不通的。在 name 属性周围添加单引号，从而使其成为字符串，这对我有用（但我不知道为什么会这样）：

 <v-select v-if="categories"
            :items="categories"
            :item-text="'name'"
            :item-value="'name'"
            v-model="selectedCategory"
            name="selectedCategory"
            label="Select categories"
            solo
            dark
          >
</v-select>

<script> ...
  categories: [
         name: "test", path: "test" ,
         name: "test1", path: "test1" 
      ],
</script>

【讨论】：

可能是因为 ":" 而不是 :item-text 它应该是 item-text

使用 :item-text="'name'" 或 item-text="name"，而不是 :item-text="name" 或 item-text="'name'"跨度>

【参考方案3】：

对于 Vuetify 2.x，使用 <v-slot:item> 插槽自定义列表，使用 <v-slot:selection> 自定义选择。 check v-select slot list in the docs

<v-select
  :items="categories"
  name="category"
  label="Select a category"
  v-model="category"
  v-validate="'required'"
>

  <template v-slot:item="item">
    item.name
  </template>    
  <template v-slot:selection="item">
    item.name
  </template>
</v-select>

【参考方案4】：

对于那些仍在寻找的人，item-name 和 item-value 属性用于指定从项目中返回的名称和值的值。如果您只想显示名称，但保留整个对象作为值，return-object 属性将返回 v-model 中的整个对象。

查看文档：https://vuetifyjs.com/en/components/selects/#custom-text-and-value

<v-select :items="categories" v-model="category" name="category"
v-validate="'required'" item-text="name" return-object label="Select a category"
/>