VueJS Select Multiple Array Undefined

1

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": []
    }
})
    
asked by anonymous 28.09.2017 / 22:32

0 answers