vuejs vue-multiselect无法显示选定对象的选定项目传递值数组

Question

我有一个由编辑或创建组件使用的字段组件。在字段组件中，我使用 Vue-multiselect 2.1.4 插件来显示带有多选选项的下拉列表，这是我的代码

<template>
    <div class="col-md-12">
    <div class="alert alert-danger alert-dismissible" v-if="errors.length && displayErrors">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
        <h4><i class="icon fa fa-ban"></i> Please correct the following error(s):</h4>
        <ul>
          <li v-for="error in errors">{{ error }}</li>
        </ul>
    </div>
    <div class="form-group">
        <label>Title<span class='red'>*</span></label>
        <input type="text" v-model="fields.title" class="form-control">
    </div>
    <div class="form-group">
        <label>Description<span class='red'>*</span></label>
        <input type="text" v-model="fields.description" class="form-control">
    </div>
    <div class="form-group">
        <label>Categories<span class='red'>*</span></label>
        <multiselect 
        v-model="fields.category"
        :options="categories"
        :value="prevGameCategory"
        :multiple="true"
        :close-on-select="false" 
        :clear-on-select="false" 
        :preserve-search="true" 
        placeholder="Pick some"
        label="name" 
        track-by="id">
        </multiselect>
    </div>
    <div class="form-group">
        <label>Game Grade Levels<span class='red'>*</span></label>
        <multiselect 
        v-model="fields.level" 
        :options="gameLevel"
        :value="prevGameLevel"
        :multiple="true"
        :close-on-select="false" 
        :clear-on-select="false" 
        :preserve-search="true"
        placeholder="Pick some" 
        label="name" 
        track-by="id">
        </multiselect>
    </div>
</div>

这是我的脚本代码

<script type="text/javascript">

import router from '../../router';
import Multiselect from 'vue-multiselect'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import VueCkeditor from 'vue-ckeditor5'

export default {
    props: [
        'categories',
        'gameLevel'
    ],
    mounted() {
        if (this.$route.params.id) {
            this.isEdit = true
            this.getGameById(this.$route.params.id)
        }
    },
    data () {
        return {
            data: {},
            prevGameLevel: [],
            prevGameCategory: [],
            baseUrl: window.BreakOut.baseUrl,
            isEdit: false,
            errors: [],
            displayErrors: false,
            image: '',
            fields: {
                title: null,
                description: null,
                category: [],
            },
            editors: {
                classic: ClassicEditor
            }
        }
    },
    methods: {
        async getGameById(game_id) {

            let urlArr = _.split(window.BreakOut.routes.admin_game_edit, '/', 3)
            let end_point = _.join(urlArr, '/')+'/'+game_id

            let url = this.baseUrl+'/'+end_point

            await axios.get(url).then((response) => {

                this.data = response.data


                this.fields.title = this.data.title
                this.fields.description = this.data.description

                if (_.isArray(this.data.game_category)) {
                    if (this.data.game_category.length > 0) {
                        _.forEach(this.data.game_category, (value, index) => {
                            this.prevGameCategory.push(_.pick(value.category, ['id', 'name']))
                        })
                    }
                }

                if (_.isArray(this.data.game_grade_level)) {
                    if (this.data.game_grade_level.length > 0) {
                        _.forEach(this.data.game_grade_level, (value, index) => {
                            this.prevGameLevel.push(_.pick(value.grade_level, ['id', 'name']))
                        })
                    }
                }
                // here i have get previous selected objects
                console.log(this.prevGameLevel)
                console.log(this.prevGameCategory)

            }).catch((error) => {
                this.$awn.alert(error)
            })

        },
    }
}

在我的代码中缺少什么，我几乎遵循插件文档，但未显示所选项目

Answer 1

您不应同时使用v-model 和:value。你可以这样做：

<multiselect
  v-model="fields.category"
  :options="categories"
  :multiple="true"
  :close-on-select="false" 
  :clear-on-select="false" 
  :preserve-search="true"
  placeholder="Pick some"
  label="name"
  track-by="id">
</multiselect>

并在获取数据函数末尾设置this.fields值：

await axios.get(url).then((response) => {

    this.data = response.data


    this.fields.title = this.data.title
    this.fields.description = this.data.description

    if (_.isArray(this.data.game_category)) {
        if (this.data.game_category.length > 0) {
            _.forEach(this.data.game_category, (value, index) => {
                this.prevGameCategory.push(_.pick(value.category, ['id', 'name']))
            })
        }
    }

    if (_.isArray(this.data.game_grade_level)) {
        if (this.data.game_grade_level.length > 0) {
            _.forEach(this.data.game_grade_level, (value, index) => {
                this.prevGameLevel.push(_.pick(value.grade_level, ['id', 'name']))
            })
        }
    }
    // here i have get previous selected objects
    console.log(this.prevGameLevel)
    console.log(this.prevGameCategory)
    this.fields = {
      ...this.fields,
      category: this.prevGameCategory,
      level: this.prevGameLevel
    }

}).catch((error) => {
    this.$awn.alert(error)
})