我的用例。
1.我从一个后端API得到了一个对象数组。
1.我想在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
实现这一点
6条答案
按热度按时间inb24sb21#
您的类别有
name
属性,您可以传递给item-text
:jgovgodb2#
我在codepen上的一个例子中看到过类似的解决方案,但是由于某种原因,仅仅为我的item-text分配“名称”并不起作用。在name属性周围添加单引号,从而使其成为字符串,这对我来说是有效的(但我不知道为什么):
pnwntuvh3#
对于那些仍在查找的用户,item-name和item-value属性用于指定从项中返回的名称和值的值。如果你只想显示名称,但保留整个对象作为值,return-object prop将返回v-model中的整个对象。
查看以下文档:https://vuetifyjs.com/en/components/selects/#custom-text-and-value
cqoc49vn4#
对于Vuetify 2.x,使用
<v-slot:item>
插槽自定义列表,使用<v-slot:selection>
自定义选择。检查文档中的v-select插槽列表jaql4c8m5#
要明确的是这里的脚本
93ze6v8z6#