vuejs multiselect checkbox not showing as checked

47 Views Asked by At

vuejs multiselect showing option as selected but its corresponding checkbox is not showing as checked. i am new to vuejs, so don't have idea, what exactly could be the issue. Can anybody help !!!

here is what i have tried code:

<div class="col-lg-3">
    <label class="py-1 input-label" for="">Model</label>
    <multiselect :options="models" @update:modelValue="selectedModel" v-model="selectedModel" :disabled="selectedMake ? selectedMake.label === 'All' : false" placeholder="All" class="custom-multiselect" ></multiselect>
</div>


// get model is getting called in mounted cycle
async getModel(catId=null, makeId=null){
    var params= "";
    if(catId != null){
        params = "?categories[]="+catId;
    }else{
        params = "?categories[]=1";
    }
    if(makeId != null){
        params += "&makes[]="+makeId;
    }
    try{
        const res = await axios.get("/api/models"+params);
        if(res.data !== null && res.data.status == true && res.data.listing.length > 0){
            for(var i=0; i< res.data.listing.length; i++){
                res.data.listing[i].label = res.data.listing[i].title
                res.data.listing[i]['name'] = res.data.listing[i].title;
            }
            this.models = res.data.listing

            if(this.choosedModel && this.choosedModel.length > 0){
                this.selectedModel = []
                this.choosedModel.forEach((model, i) => {
                    if(this.models.find((val)=>val.title.toLowerCase() == model)){
                        let x = this.models.find((val)=>val.title.toLowerCase() == model)
                        x.checked = true
                        this.selectedModel.push(x)
                        // i have printed this.selectedModel, and it showed 2 array item;
                    }
                });
            }
        }
    }catch(err){
        this.models = []
    }
},

here is the image of the result: image1 [1]: https://i.stack.imgur.com/o9L3v.png

image2 [2]: https://i.stack.imgur.com/kWKKn.png

0

There are 0 best solutions below