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

【问题标题】：How to populate a Vuetify Select using data from axios如何使用来自 axios 的数据填充 Vuetify Select
【发布时间】：2018-04-19 15:07:15
【问题描述】：

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

文本显示有效数据：

[ { "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)
        });

非常感谢

【问题讨论】：

标签： vue.js html-select axios vuetify.js

【解决方案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>

演示：

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>

【讨论】：

嗨，结果相同，但带有警告：属性或方法“id”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。
我不知道，但我复制了你的，现在它可以工作了，我想是因为我使用了 :item-text 而你使用 item-text 却没有：
是的，没有:。当您使用:item-text="someValue" 时，它将在当前范围内查找someValue 变量。在您的情况下，您可能使用了:item-text="id" 并且可能出现错误，因为当前范围内不应有id 变量（id 是每个entidade 的属性，而不是它自己的变量)。