Php Vue js multiselect编辑表单不显示数据

我在我的laravel应用程序中使用了vue multiselect，如下所示

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

---

在存储表单时，multiselect可以工作，但在编辑时，它不会显示所选数据。任何人都能说出原因吗？？？以及如何解决它

您需要设置

：value

属性，以便设置默认的选定值，而不是

v-model

vue multiselect的

v-model

基本上是它内部处理的副本。不应用于手动设置选项。为此使用

：value

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