How to display multiple labels in vue-select field using Vue Select Library

Question

I am using vue-select component from Vue Select Library in my html form as shown below and I want to display three value in the label but don't know how to achieve that. i couldn't found any solution in the documentation.

I want to display three value in the label as shown below.

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

        }

        });

Ref to vue select library documentation: https://vue-select.org/guide/values.html#transforming-selections

Sabee · Accepted Answer · 2019-07-16 16:41:33Z

8

Just use template literals, what allow embed expressions in JavaScript strings. And make the label binded :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;" />

Update label can use only for one object property. But you can use scopes for options and selected values. Example on 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>

Update 2 Multi properties search vue-select

vue-component

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

vue-code

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

edited Jul 16, 2019 at 16:41

answered Jul 16, 2019 at 11:32

Sabee

1,81111 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

astroame Over a year ago

I have tried this, it did not work. i got an empty list of options

Sabee Over a year ago

Okey I figured out and updated, also upload the example to codepen

astroame Over a year ago

This is getting closer. I can now display three properties of the object But when i try to search an item, i get "no result found". also the onChange event only fires for my first selection, to select another item, i have to unselect the current selection before the onChange event would fire again. Pls i really want to be able to search items by their name and code. Thanks

astroame Over a year ago

This works. Thanks so much bro, you are indeed a life saver. i owe you a pizza. Thanks I used the this.options.map(function (x){ return x.item_data = x.item_name + ' ' + x.item_code + ' ' + x.created_at; }

Sabee Over a year ago

I glad to help you. I look forward my pizza :) :)

|

Collectives™ on Stack Overflow

How to display multiple labels in vue-select field using Vue Select Library

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related