[英]Vuetify v-select issue
我正在嘗試將項目分配給我的v-select下拉列表,但我不斷收到消息, no data available
,我有一個對象數組。 我正在使用模板插槽,但不確定我在做什么錯。
我制作了一個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'},
]
}
}
})
預先謝謝你們。
v-select
期望使用字符串數組作為值,但是您綁定了一個填充有對象的數組,這就是為什么看到[object object]
因此必須添加item-text
[object object]
:
<v-select
:items="items"
name="item"
label="Select a item"
item-text="name"
></v-select>
你在寫
<v-select :ietms="items" label="people">
應該
<v-select :items="items" label="people">
我從沒使用過vuetify,但是我在documentacion中發現了它,然后我分叉了你的筆: https ://codepen.io/christiancazu/pen/mZLWpL
您缺少項目文本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>
這應該工作
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.