vuejs vue-multiselect can't display selected item pass value array of selected objects

Question

I have a field component that is utilized by both edit or create component. in field component i used Vue-multiselect 2.1.4 plugin to show dropdown with multi-select options here is my code

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

And here is my script code

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

        },
    }
}

In my code what am missing i almost follow plugin doc but the selected items were not displayed

Answer 1

You should not use both v-model and :value simultaneously. You can do:

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

and set this.fields value at the end of getting data function:

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