How to render elements in drop down using vselect

Question

I'm having a form in vue js with select drop downs, I'm trying to use https://sagalbot.github.io/vue-select/ this library to execute this, according to the documentation I've to pass an array into this and I'm calling a axios method to get the options of the drop downs. I'm getting the data in following format:

And with following description:

I want to only show the names in the option and get values as ID of that particular row, how can I achieve this.

My code look something like this: https://jsfiddle.net/eemdjLex/1/

<div id="app">
  <v-select multiple :options="model.data"></v-select>
</div>

import vSelect from 'vue-select';

Vue.component('v-select', vSelect)

const app = new Vue({
    el: '#app'
    router: router,
    data () {
        return {
            model: {},
            columns: {},
      }
    }
    methods: {
        fetchIndexData() {
                var vm = this;
                axios.get('/companies').then(response => {
                Vue.set(vm.$data, 'model', response.data.model)
                Vue.set(vm.$data, 'columns', response.data.columns)
            }
    }
});

It is not working proper but you get the idea what I'm trying to do.

Answer 1

Looking at the README on the GitHub page for vue-select, I'm seeing that you can pass the <v-select> component an options property as an array of objects with label and value keys.

I would make a computed property to take your model.data and format it this way:

computed: {
  options() {
    let data = this.model.data;
    let options = [];

    // do whatever you need to do to format the data to look like this object:
    // options = [{ label: 'foo', value: 1 }, { label: 'bar', value: 2 }]

    return options;
  }
}

Then pass this computed property to the <v-select> instead:

<v-select multiple :options="options"></v-select>

Answer 2

v-select appears to return the entire option as the value when using v-model so I might use a pair of computed values here.

new Vue({
  el:"#app",
  data:{
    serverData,
    selected: null
  },
  computed:{
    // serverData is a stand in for your model.data.
    // map over that to build your options
    selectOptions(){
      return this.serverData.map(d => ({label: d.name, value: d.id}))
    },
    // selectedOption is just a short computed to get the id value
    // from whatever option was selected. You could also just use
    // "selected.id" in whatever needs the id instead if needed.
    selectedOption(){
      if (this.selected)
        return this.selected.value
      else
        return null
    }
  }
})

Example.

Answer 3

The official select docs may help you

your v-select component should look like

new Vue({
  template: `
     <select v-model="selected">
       <option v-for="option in options" v-bind:value="option.value">
         {{ option.text }}
       </option>
     </select>
     <span>Selected: {{ selected }}</span>`,
  el: 'v-select',
  props: [ 'options' ]
  data: {
    selected: ''
  }
})