Vuejs 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

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

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

但是这里有了vuetify,我们不能这样做.

:items="categories.name"

Vuetify文档

可以是对象数组或字符串数​​组.使用对象时,将查找文本和值字段.这可以使用item-text和item-value props进行更改.

他们实际上的意思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

对于仍在寻找的人， 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"
/>