Vue js多选编辑表单不显示数据答案

【问题标题】：Vue js multiselect edit form not showing dataVue js多选编辑表单不显示数据
【发布时间】：2020-01-04 14:16:13
【问题描述】：

我在我的 laravel 应用中使用了一个 vue 多选，像这样......

<coupon-form :action="'{{ $coupon->resource_url }}'" :data="{{ $coupon->toJson() }}"
                    inline-template>

<form class="form-horizontal form-edit" method="post" @submit.prevent="onSubmit" 
:action="this.action" novalidate>

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

</coupon-form>

它的vue文件是这样的

import AppForm from '../app-components/Form/AppForm';

Vue.component('coupon-form', {
    mixins: [AppForm],
    data: function() {
        return {
            form: {
                name:  '' ,
                description:  '' ,
                valid_from:  '' ,
                valid_till:  '' ,
                discount:  '' ,
                enabled:  false,
                books: [],
            },
            isLoading: false,
            options: [],
            selected: [],
        }
    },
    methods: {
        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);
        }
    }
});

在存储表单时，多选有效，但在编辑时它不显示所选数据有人能告诉我为什么吗？？？以及如何解决它

【问题讨论】：

标签： php laravel vue.js

【解决方案1】：

您需要设置:value 属性才能设置默认选定值而不是v-model。

vue-multiselect 的 v-model 基本上是它在内部处理的副本。不应用于手动设置选项。为此使用:value。

【讨论】：