[英]Vuetify v-select issue
i am trying to assign items to my v-select dropdown but i keep getting the message no data available
, i have an array of objects. 我正在尝试将项目分配给我的v-select下拉列表,但我不断收到消息, no data available
,我有一个对象数组。 i am using the template slot but not sure what I'm doing wrong. 我正在使用模板插槽,但不确定我在做什么错。
I have made a codepen for demonstration: https://codepen.io/anon/pen/LKmZKZ?editors=1011 我制作了一个Codepen进行演示: https ://codepen.io/anon/pen/LKmZKZ?editors = 1011
<div id="app">
<v-app id="inspire">
<v-container>
<v-layout>
<v-flex xs4>
<v-select :items="items" label="people">
<template slot="selection-item" slot-scope="item">
<v-icon :color="item.icon_color">{{item.icon}}</v-icon>
{{item.name}}
</template>
</v-select>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
new Vue({
el: '#app',
data() {
return {
items: [
{name: 'Karen', icon : 'search', icon_color: 'red'},
{name: 'Gordon', icon : 'person', icon_color: 'yellow'},
{name: 'Craig', icon : 'opacity', icon_color: 'blue'},
{name: 'Chris', icon : 'pets', icon_color: 'orange'},
]
}
}
})
Thank you in advance guys. 预先谢谢你们。
v-select
expects an array of strings as the value but you are binding an array filled with objects that's why you are seeing [object object]
so you gotta add item-text
prop: v-select
期望使用字符串数组作为值,但是您绑定了一个填充有对象的数组,这就是为什么看到[object object]
因此必须添加item-text
[object object]
:
<v-select
:items="items"
name="item"
label="Select a item"
item-text="name"
></v-select>
u are writing 你在写
<v-select :ietms="items" label="people">
should be 应该
<v-select :items="items" label="people">
i never used vuetify but i found in documentacion about this, then i forked your pen: https://codepen.io/christiancazu/pen/mZLWpL 我从没使用过vuetify,但是我在documentacion中发现了它,然后我分叉了你的笔: https ://codepen.io/christiancazu/pen/mZLWpL
You are missing item text item-text="name", thats why it says [object object] in the dropdown 您缺少项目文本item-text =“ name”,这就是为什么它在下拉列表中显示[object object]
<div id="app">
<v-app id="inspire">
<v-container>
<v-layout>
<v-flex xs4>
<v-select :items="items" item-text="name" label="people">
<template slot="selection-item" slot-scope="item">
<v-icon :color="item.icon_color">{{item.icon}}</v-icon>
{{item.name}}
</template>
</v-select>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
This should work 这应该工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.