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

Question

我需要填充一个 Vuetify select，但是它有一个问题，我的 Get 方法 returns 数据，但是 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 是每个项目将显示并用作值的属性的 name ，分别。所以使用 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>

演示：

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>

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

How to populate a Vuetify Select using data from axios

html-select

vue.js

axios

vuetify.js