如何使用Vue Select库在vue-select字段中显示多个标签

Question

我在 html 表单中使用 Vue Select 库中的 vue-select 组件，如下所示，我想在标签中显示三个值，但不知道如何实现。我在文档中找不到任何解决方案。

我想在标签中显示三个值，如下所示。

    <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;" />

HTML：

     <script src="{{ asset('assets/requiredjs/vue-select.js') }}"></script>
     <link href="{{ asset('assets/requiredcss/vue-select.css') }}" rel="stylesheet">

    <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;" />

JS：

    Vue.component('v-select', VueSelect.VueSelect);

    var app = new Vue({
        el: '#app',
        data: {

        formfieldsdata: {

                items: [],

            },

        item: {
                selected_item: 0,
            },

        }

        });

参考 vue select 库文档：https://vue-select.org/guide/values.html#transforming-selections

Answer 1

只需使用模板文字，它允许在 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;" />

更新 label只能用于一个对象属性。但您可以使用选项和选定值的范围。Codepen 上的示例

<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>

更新2 多属性搜索vue-select

vue-组件

 <div id="app">
  <h1>Vue Select - Multiple properties</h1>
  <v-select :options="options" label="item_data"
   v-model="selected">
  </v-select>
</div>

vue 代码

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'
        }
    ]
  }
})