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 属性进行更改。

他们实际上是什么意思 item-text 和 item-value 我如何使用 item-text

原文由 margherita pizza 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 ittus 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Programina 发布，翻译遵循 CC BY-SA 4.0 许可协议