如何在Vue MultiSelect下拉列表中显示多个标签

Question

我在laravel应用中使用了vue multiselect

我已完成此操作

<multiselect v-model="selected" track-by="id" label="name" :options="options" :loading="isLoading" :internal-search="false" @search-change="getData" :multiple="true" :close-on-select="false" :hide-selected="true":internal-search="false" name="books[]" :show-labels="false" :custom-label="customLabel"></multiselect>

在我的Vue文件中，我已完成

    Vue.component('coupon-form', {
    mixins: [AppForm],
    data: function() {
        return {
            form: {
                books: [],
            },
            isLoading: false,
            options: [],
            selected: [],

        }
    },
    methods: {
        customLabel ({ name, sku }) {
          return `${name} — ${sku}`
        },
        getData(query){
            this.isLoading = true;

            axios.post('/admin/books/find/'+query)
            .then((response) => {
                this.options = response.data;
                this.isLoading = false;
            })
            .catch((error) => {
                this.isLoading = false;
            });
        },
    },
    watch: {
        selected (newValues) {
             this.form.books = newValues.map(obj => obj.id)
        }
    }
});

如您所见，我也使用了ajax远程选项和自定义标签，但这给了我这样的错误

任何人都可以帮助为什么它向我展示了这个东西...

Answer 1

一个问题是您将:internal-search="false"两次传递给multiselect，这在测试时给我一个错误。尝试删除第二个，看看是否仍然存在相同的错误。

Answer 2

我用您的示例here创建了小提琴，它正在工作！

但是由于某种原因，当我添加@search-change时，它不起作用。

因此，请尝试使用该功能，看看是否可行。

@@ T. Short也提到删除重复的道具。

祝你好运！