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' }
                    ]
                }
            ],

这是刀片中的代码：

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

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

至少可以说有点困惑！

Answer 1

我设法解决了这个问题。

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

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

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

Vue-Multiselect是空的 - Laravel Spark

1 个答案: