axios datos de respuesta para preseleccionar en multiselección
Estoy usando el popular complemento para multiselección 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>
En mi código, estoy usando la solicitud de axios para recuperar la identificación de usuario y el nombre que se preseleccionará con la selección múltiple
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);
});
},
}
y la respuesta se ve así
selectedTags:Array[2]
0:Object
id:3
name:"asdaa"
1:Object
id:4
name:"atetest"
Ahora, obtuve el resultado con éxito y preseleccioné los datos en selección múltiple
Sin embargo, cuando hago clic en la "x" para eliminar, no elimina los datos seleccionados y no se han mostrado errores. ¿Cómo arreglar esto? TIA
Así se ve mi objeto de opciones
options:Array[2]
0:Object
id:4
name:"atetest"
1:Object
id:3
name:"asdaa"
Objeto de prueba
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]
devolver datos
export default {
data(){
return {
test:{
url: "",
selectedTags:[]
},
urls:{},
users:{},
contacts: [],
monitorModal:false,
result: '',
pagination: {},
loading: true,
edit:false,
urlChecked: {},
logsModal: false,
logsData:{},
//mulltiselect
options: []
}
},
}