How to populate a Vuetify Select using data from a

Question

I need to populate a Vuetify select, but there is a problem with it, my Get method returns data, but the vuetify select only show something like this:

The text shows valid data:

[ { "id": 1 }, { "id": 2 } ]

And to populate the Select i follow the documentatioin adding :items="entidades" and :item-text="entidades.id" and :item-value="entidades.id"

<v-select :items="entidades" :item-text="entidades.id" :item-value="entidades.id" single-line auto prepend-icon="group_work" label="Seleccionar Grupo"></v-select>

This is my code form script

`data() {
return(){
entidades: [{
          id: ''  
        }],
}
}`

I already tried to put 0, but it's the same result.

My axios.get method.

    axios.get('http://localhost:58209/api/GetEntidades', {
      headers:{
       "Authorization": "Bearer "+localStorage.getItem('token')
          }
  })
    .then(response => { 
      console.log(response)
      this.entidades = response.data;
        })
        .catch(error => {
        console.log(error.response)
        });

Thank you so much

Answer 1

item-text and item-value are the name of the properties each item will display and use as value, respectively. So use item-text="id" item-value="id":

<v-select :items="entidades" item-text="id" item-value="id" single-line auto prepend-icon="group_work" label="Seleccionar Grupo"></v-select>

Demo:

new Vue({
  el: '#app',
  data () {
    return {
      entidades: [ { "id": 1 }, { "id": 2 } ]
    }
  }
})

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<link rel='stylesheet' href='https://unpkg.com/vuetify@1.0.10/dist/vuetify.min.css'>
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src='https://unpkg.com/vuetify@1.0.10/dist/vuetify.min.js'></script>

<div id="app">
  <v-app>
    <v-container>
      <v-select :items="entidades" item-text="id" item-value="id" single-line auto prepend-icon="group_work" label="Seleccionar Grupo"></v-select>
    </v-container>
  </v-app>
</div>