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

您需要设置validations: { formA: { email } }属性以设置默认选择的值，而不是data。

vue-multiselect的export default { components: { PhoneField, TopNote, SubmitButton, NameFieldsGroup, EmailField }, validations: { formA: { firstName: { required }, lastName: { required }, email: { required, email }, phone: { required, length: minLength(10) } } }, created() { this.$store.commit('setFormValidation', this.$v); }, data() { return {} }, computed: { firstName: function() { return this.$store.getters.formState.firstName; }, lastName: function() { return this.$store.getters.formState.lastName; }, email: function() { return this.$store.getters.formState.email; }, phone: function() { return this.$store.getters.formState.phone; } } };基本上是它在内部处理的副本。不应用于手动设置选项。为此使用:value。

Vue JS MultiSelect编辑表单未显示数据

1 个答案: