Vue js多選編輯表單不顯示數據

Question

我在我的 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);
        }
    }
});

在存儲表單時，多選工作但在編輯時不顯示選定的數據有人能告訴為什么嗎？？？ 以及如何解決

Answer 1

您需要設置:value屬性以設置默認選定值而不是v-model 。

vue-multiselect 的v-model基本上是它內部處理的副本。 不應用於手動設置選項。 使用:value 。