Im using the popular plugin for multiselect shentao/vue-multiselect
<multiselect v-model="test.selectedTags"
:options="options"
:multiple="true"
:clear-on-select="false"
:hide-selected="true"
:preserve-search="true" placeholder="Pick some" label="name" track-by="name" :preselect-first="true">
</multiselect>
On my code im using axios request to fetch user id and name to be pre-selected by the multi-select
editUrl: function(id){
let vm = this;
axios.get('api/urls/' + id)
.then( response => {
vm.test.selectedTags = response.data.data.users.map(user => ({ name:user.name, id: user.id }))
})
.catch( error => {
console.log(error);
});
},
}
and the response looks like this
selectedTags:Array[2]
0:Object
id:3
name:"asdaa"
1:Object
id:4
name:"atetest"
Now, I successfully got the result and pre-select the data in multi-select
However when i click the "x" to remove, it doesnt remove the selected data and no errors has been shown. How to fix this? TIA
This is what my options object looks like
options:Array[2]
0:Object
id:4
name:"atetest"
1:Object
id:3
name:"asdaa"
Test object
test:Object
created_at:"2018-09-07 15:58:51"
description:"server5"
id:9
latest_url_status:Object
list_status:1
selectedTags:Array[2]
0:Object
id:3
name:"asdaa"
1:Object
id:4
name:"atetest"
updated_at:"2018-09-07 16:48:34"
url:"https://httpstat.us/200"
users:Array[2]
return data
export default {
data(){
return {
test:{
url: "",
selectedTags:[]
},
urls:{},
users:{},
contacts: [],
monitorModal:false,
result: '',
pagination: {},
loading: true,
edit:false,
urlChecked: {},
logsModal: false,
logsData:{},
//mulltiselect
options: []
}
},
}