0

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

1 Answer 1

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)
})
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.