1
I have a Rest API
who returns me CategoriaList
and CategoriaSelected
.
He’s giving conflict when I do with a Select Multiple
in the HTML
Categories.
<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>
JSON of the API
Data: {
CategoriaList: [
{ "Name": "Categoria 1", "Value": 1 },
{ "Name": "Categoria 2", "Value": 2 }
],
CategoriaSelecionada: []
}
CONSOLE ERROR
[Vue warn]: select Multiple v-model="dataItem.Categoriesalected" > expects an Array value for its Binding, but got Undefined
I played in the HTML
one H1
of this.dataItem
and the values come right, so much so that the v-for option do select
is populated, but because the dataItem.CategoriaSelecionada
comes as undefined
if it comes from the API as a array
?
Thank you!
@EDIT - Solved
I had to boot in Date o Categorieselected as an empty array. Apparently the slowness that the API takes to bring the data, ends up affecting when Vue draws the DOM.
data: () => ({
dataItem: {
"CategoriaProdutoSelected": []
}
})
Thanks for editing, @Rafael Augusto
– Jackson