How to populate a Vuetify Select using data from axios - vue.js

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>