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