Vuejs Select Multiple Array Undefined

Asked

Viewed 258 times

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

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.