Vue.js Vuetify如何在v-select中访问对象的属性

Question

我的用例。

1. 我从后端api获得了一系列对象。
2. 我想在v-select中渲染这些对象

这是我的代码。

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

但是它给了我输出。

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

中

我们将在香草Vue.js中实现

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

但是在这里，我们无法做到这一点。

:items="categories.name"

验证文档

  

可以是对象数组或字符串数​​组。使用物件时   将查找文本和值字段。可以使用   项目文本和项目价值道具。

item-text和item-value的实际含义 如何使用item-text

任何帮助表示感谢。

Answer 1

您的类别具有name属性，您可以传递给item-text：

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

Answer 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>

Answer 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>