How to render elements in drop down using vselect in vue js

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.

Please show the code you've written to do this.

thanksd
– thanksd

2017-05-23 16:30:49 +00:00
Commented May 23, 2017 at 16:30 — thanksd
– thanksd, Commented May 23, 2017 at 16:30
@thanksd: please check

Nitish Kumar
– Nitish Kumar

2017-05-23 16:39:16 +00:00
Commented May 23, 2017 at 16:39 — Nitish Kumar
– Nitish Kumar, Commented May 23, 2017 at 16:39

Bert · Accepted Answer · 2017-05-23 16:57:22Z

1

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.

answered May 23, 2017 at 16:57

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

1 Comment

Nitish Kumar Over a year ago

Thanks, this helped.

thanksd · Accepted Answer · 2017-05-23 16:46:17Z

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>

answered May 23, 2017 at 16:46

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

2 Comments

Nitish Kumar Over a year ago

I need to iterate the model.data and store in options?

thanksd Over a year ago

yeah, i don't know what your model data looks like, but if it's an array, you'd iterate through it, and for each element, push an object to the options array with a label and value property set to whatever properties of the element you want to be the label and value.

tony19 · Accepted Answer · 2022-07-16 02:05:47Z

1

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

edited Jul 16, 2022 at 2:05

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 23, 2017 at 16:42

Evaldo Bratti

7,7782 gold badges20 silver badges19 bronze badges

2 Comments

thanksd Over a year ago

This is the right idea, but he's using a custom v-select component, not a select element.

Nitish Kumar Over a year ago

That's true. I've already being using as per normal select docs and I know it can be implemented like this but I'm using v-select component

Collectives™ on Stack Overflow

How to render elements in drop down using vselect in vue js

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related