Vuejs Vuetify 如何在 v-select 中访问对象的属性 [英] Vuejs Vuetify how to access properties of object in v-select

问题描述

我的用例.

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

1. I got an array of objects from a back-end api.
2. I want to render those objects in a 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 中做到这一点

We would do this in vanilla Vue.js

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

但是在这里使用 vuetify 我们不能这样做.

But here with vuetify we can't do this.

:items="categories.name"

Vuetify 文档

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

Can be an array of objects or array of strings. When using objects, will look for a text and value field. This can be changed using the item-text and item-value props.

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

What they actually mean by item-text and item-value How do I achieve this using item-text

推荐答案

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

Your category has name attribute, you can pass to item-text:

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

这篇关于Vuejs Vuetify 如何在 v-select 中访问对象的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！