Vuejs2 如何使用vue选择库在vue选择字段中显示多个标签
我在html表单中使用vue选择库中的vue选择组件,如下所示,我想在标签中显示三个值,但不知道如何实现。我在文档中找不到任何解决方案 我想在标签中显示三个值,如下所示Vuejs2 如何使用vue选择库在vue选择字段中显示多个标签,vuejs2,Vuejs2,我在html表单中使用vue选择库中的vue选择组件,如下所示,我想在标签中显示三个值,但不知道如何实现。我在文档中找不到任何解决方案 我想在标签中显示三个值,如下所示 <v-select id="selected_item" name="selected_item" title="Select an item" :options="formfieldsdata.items" :reduce="item_name => item_name.id" label="item_na
<v-select id="selected_item" name="selected_item" title="Select an item" :options="formfieldsdata.items" :reduce="item_name => item_name.id" label="item_name+'::'+item_code+'::'+item_created_at" v-model="item.selected_item" @input="getSelectedItem" style="width: 100%; height:56px;" />
请参阅vue select library文档:只需使用模板文本,即可在JavaScript字符串中嵌入表达式。并将标签装订成
:label
<v-select id="selected_item" name="selected_item" title="Select an item" :options="formfieldsdata.items" :reduce="item_name => item_name.id" :label="`${item_name} ${item_code} ${item_created_at}" v-model="item.selected_item`" @input="getSelectedItem" style="width: 100%; height:56px;" />
更新2
多属性搜索vue选择
vue组件
我已经试过了,它不起作用。我得到了一个空的选项列表,我找到了并更新了,还将示例上传到CodePent。这越来越近了。我现在可以显示对象的三个属性,但是当我尝试搜索一个项目时,我得到“找不到结果”。此外,onChange事件仅在第一次选择时触发,要选择另一项,我必须在再次触发onChange事件之前取消选择当前选择。请我真的希望能够搜索他们的名字和代码的项目。感谢他的作品。非常感谢兄弟,你真是个救命恩人。我欠你一个比萨饼。谢谢,我使用了this.options.map(函数(x){return x.item_data=x.item_name+''+x.item_code+''+x.created_at;}我很高兴能帮助你。我期待着我的披萨:):)
<v-select id="selected_item" name="selected_item" title="Select an item" :options="formfieldsdata.items" :reduce="item_name => item_name.id" label="item_name" v-model="item.selected_item" @input="getSelectedItem" style="width: 100%; height:56px;" />
Vue.component('v-select', VueSelect.VueSelect);
var app = new Vue({
el: '#app',
data: {
formfieldsdata: {
items: [],
},
item: {
selected_item: 0,
},
}
});
<v-select id="selected_item" name="selected_item" title="Select an item" :options="formfieldsdata.items" :reduce="item_name => item_name.id" :label="`${item_name} ${item_code} ${item_created_at}" v-model="item.selected_item`" @input="getSelectedItem" style="width: 100%; height:56px;" />
<v-select id="selected_item" name="selected_item" title="Select an item" :options="formfieldsdata.items" :reduce="item_name => item_name.id" v-model="item.selected_item" @input="getSelectedItem" style="width: 100%; height:56px;" >
<template slot="option" slot-scope="option">
<span :class="option.icon"></span>
{{ option.item_name }} {{option.item_code}} {{option.created_at}}
</template>
<template slot="selected-option" slot-scope="option">
<span :class="option.icon"></span>
{{ option.item_name }} {{option.item_code}} {{option.created_at}}
</template>
</v-select>
<div id="app">
<h1>Vue Select - Multiple properties</h1>
<v-select :options="options" label="item_data"
v-model="selected">
</v-select>
</div>
Vue.component('v-select', VueSelect.VueSelect)
new Vue({
el: '#app',
data: {
options: [
{
title: 'Read the Docs',
icon: 'fa-book',
url: 'https://codeclimate.com/github/sagalbot/vue-select'
},
{
title: 'View on GitHub',
icon: 'fa-github',
url: 'https://codeclimate.com/github/sagalbot/vue-select'
},
{
title: 'View on NPM',
icon: 'fa-database',
url: 'https://codeclimate.com/github/sagalbot/vue-select'
},
{
title: 'View Codepen Examples',
icon: 'fa-pencil',
url: 'https://codeclimate.com/github/sagalbot/vue-select'
}
]
}
})