Vue-Multiselect 为空 - Laravel Spark

Question

我一直在实施最新的 Vue-Multiselect 并在页面中正常呈现。出于某种原因，v-model 值似乎没有生效，因为它保持为空。

import { Multiselect } from 'vue-multiselect'

var MultiSelect = Vue.extend({
components: { Multiselect },
template: '<div><multiselect :options="options" :multiple="true" :close-on-select="false" :clear-on-select="false" :hide-selected="true" placeholder="Please select..." label="name" track-by="name"></multiselect></div>',
    data: function() {
        return {
            value: [],
            options: []
        };
    }
});

Vue.component('multi-select', MultiSelect);

我正在按照示例设置所有选项：

options: [
                {
                    language: 'Javascript',
                    libs: [
                        { name: 'Vue.js', category: 'Front-end' },
                        { name: 'Adonis', category: 'Backend' }
                    ]
                },
                {
                    language: 'Ruby',
                    libs: [
                        { name: 'Rails', category: 'Backend' },
                        { name: 'Sinatra', category: 'Backend' }
                    ]
                },
                {
                    language: 'Other',
                    libs: [
                        { name: 'Laravel', category: 'Backend' },
                        { name: 'Phoenix', category: 'Backend' }
                    ]
                }
            ],

这是blade中的代码：

    <multi-select v-model="updateTutorInstrumentsForm.options" group-values="libs" group-label="language"></multi-select>

    <pre>@{{ updateTutorInstrumentsForm.options }}</pre>

至少可以说有点困惑！

Answer 1

我设法解决了这个问题。

感谢 Justin 关于封装 multi-select 的评论，我决定将其分解并执行以下操作：

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);

然后在 blade 模板中，只需：<customselect></customselect>

Vue-Multiselect 为空 - Laravel Spark

Vue-Multiselect is empty - Laravel Spark

laravel

vue.js

laravel-spark