[Vuejs]-Vue-Multiselect is empty – Laravel Spark

by

0👍

✅

I managed to resolve this.

Thanks to Justin’s comment about encapsulating the multi-select, I decided to break it out and did the following:

import { Multiselect } from 'vue-multiselect'

var CustomSelect = Vue.extend({
components: { Multiselect },
template: '<div><multiselect :multiple="true" :selected="selected" :options="options" group-values="instruments" group-label="name" track-by="name" label="name"></multiselect></div>',

created() {
    this.getInstruments();
},

data: function() {
    return {
        selected: null,
        options: []
    };
},

methods: {
    getInstruments() {
        this.$http.get('/get/instruments')
            .then(response => {
                this.instruments = response.data;
                this.updateInstruments();
            });
    },

    updateInstruments() {
        this.options = this.instruments;
    },
}
});

Vue.component('customselect', CustomSelect);

Then in the blade template, simply: <customselect></customselect>

Leave a comment