如何使用 axios 中的数据填充 Vuetify Select

Question

我需要填充一个 Vuetify select，但它有问题，我的 Get 方法返回数据，但 vuetify select 只显示如下内容：

文本显示有效数据：

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

并填充 Select 我按照文档添加 :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>

这是我的代码表单脚本

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

我已经尝试输入 0，但结果相同。

我的 axios.get 方法。

    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)
        });

非常感谢

Answer 1

item-text和item-value分别是每个项目将显示和用作值的属性的名称。所以使用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>

演示：

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

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