Vue-Multiselect 为空 - Laravel Spark答案

【问题标题】：Vue-Multiselect is empty - Laravel SparkVue-Multiselect 为空 - Laravel Spark
【发布时间】：2023-03-21 03:42:01
【问题描述】：

我一直在实现最新的 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>

至少可以说有点困惑！

【问题讨论】：

我的猜测与您封装多选的事实有关，因此 v-model 没有任何附加内容。您是否尝试过将价值从数据转移到道具？它看起来也不像是在组件内的任何地方使用 value 参数。
感谢@JustinMacArthur，感谢您的评论，我已经解决了！

标签： laravel vue.js laravel-spark

【解决方案1】：

我设法解决了这个问题。

感谢贾斯汀关于封装多选的评论，我决定打破它并做了以下事情：

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>

【讨论】：