无法使用预定义对象更新 Vue-Multiselect 模型

Question

使用 vue-multiselect 在表单编辑时设置预定义的选定值时遇到一个小问题。我已经尝试了多种不同的方法来尝试使其工作，并且目前处于设置预定义值的阶段，但是每当我尝试手动更新 form.newstype 表单属性时，如下所示，该值不会改变多选。

期望的结果是不使用绑定到多选组件的@select 方法，而只依靠模型通过2 路绑定进行更新，但是我的 form.newstype 似乎没有更新。任何指示或建议都是最受欢迎的。解决方案就是救命稻草。

下面的代码相同。

Vue.component('news-form', {
    mixins: [AppForm],
    props: ['newstypes', 'activetype'],
    data: function() {
        return {
            form: {
                title:  '' ,
                slug:  '' ,
                perex:  '' ,
                published_at:  '' ,
                enabled:  false ,
                newstype: '',
            }
        }
    },
    methods:{

        updateNewsType:function(newVal, id){
            console.log(newVal);
            this.form.newstype = newVal;

        }

    },
    created() {

        this.form.newstype = this.activetype;
    }

});

<multiselect
                @select="updateNewsType"
                v-model="form.newstype"
                :options="newstypes"
                :multiple="false"
                track-by="type"
                label="type"
                tag-placeholder="{{ __('Select News Type') }}"
                placeholder="{{ __('News Type') }}">
</multiselect>

console.log 输出更新的对象，但是 form.newstypes 没有更新。

提前感谢您的帮助

Answer 1

您可以使用watch 收听所选值的任何更新：

v-model="selected_news_type"

watch: {
     selected_news_type: function(value){
            console.log(value);
            this.form.newstype = value;   
}

}