I have a Rest API
that returns me CategoriaList
and CategoriaSelected
.
It is conflicting when I do with Select Multiple
on HTML
Categories.vue
<template>
<select multiple class="form-control" v-model="dataItem.CategoriaSelecionada">
<option v-for="item in dataItem.CategoriaList" v-bind:value="item">{{item.Name}}</option>
</select>
</template>
<script>
export default {
data: () => ({
dataItem: {}
}),
created(){
getCategoria(){
axios.get( localhost:61110/api/categoria )
.then ( res => {
this.dataItem = res.data.Data
})
}
}
</script>
API JSON
Data: {
CategoriaList: [
{ "Name": "Categoria 1", "Value": 1 },
{ "Name": "Categoria 2", "Value": 2 }
],
CategoriaSelecionada: []
}
ERROR CONSOLE
[Vue Warn]: select multiple v-model="selectedCategoryDataItem" > expects an Array value for its binding, but got Undefined
I've played in HTML
a H1
of this.dataItem
and the values come right, so much that v-for option do select
is populated, but because dataItem.CategoriaSelecionada
comes as undefined
if it comes from the API as a array
?
Thank you!
@EDIT - Resolved
I had to initialize on the Date CategorySelected as an empty array. Apparently the slowness that the API takes to bring the data, ends up affecting when Vue designs the DOM.
data: () => ({
dataItem: {
"CategoriaProdutoSelected": []
}
})