I have a Vue.js form with select drop-downs, and I am attempting to utilize the library to achieve this. According to the documentation, I need to pass an array into it, and I'm using an axios method to fetch the options for the drop-downs. The data that I am receiving is in the following format:
https://i.sstatic.net/DUEtW.png
With the following description:
https://i.sstatic.net/nbIpb.png
I only want to display the names in the options and retrieve the values as the ID of the respective row. How can I accomplish this?
My code looks 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's not working properly, but it gives you an idea of what I'm trying to achieve.