vuetify v-select 来自 json 对象数组的选项答案

【问题标题】：vuetify v-select options from json array of objectsvuetify v-select 来自 json 对象数组的选项
【发布时间】：2018-09-05 00:34:05
【问题描述】：

我正在尝试从 rest api json 响应中填充 vuetify v-select。以下是我到目前为止的代码。使用简单数组填充列表没有问题，但我很难同时设置 value 和 text 属性。

<template>
  <v-container fluid>
    <v-slide-y-transition mode="out-in">
       <v-layout column align-center>
        <v-select v-model="dbSelect" v-on:change="dbConnect()"  :items="dbOptions" single-line></v-select>
       </v-layout>
    </v-slide-y-transition>
  </v-container>
</template>

<script>
import axios from 'axios'

export default {
  name: 'HelloWorld',
  data () {
    return {
      dbSelect: '',
      dbOptions: [],
    }
  },
  mounted () {
    axios.get('http://localhost:5000/api/values')
      .then(r => {
        // var formatted = []
        for (let i = 0; i < r.data.length; i++) {
          this.dbOptions.push(r.data[i])
          // formatted[i] = { value: r.data[i].id, text: r.data[i].name }
        }
      },
      error => {
        console.error(error)
      }
      )
  }
}
</script>

这是简单的 Json 数据集：

[{"id":1,"name":"A"},{"id":2,"name":"B"},{"id":3,"name":"C"},{"id":4,"name":"D"},{"id":5,"name":"E"}]

目前我正在推动整个对象，因为我一直在尝试使用 item-value 和 item-text 但根据文档我可以看到这是不对的。 r.data[i].id 和 r.data[i].name 按预期生成一个下拉列表。我想将 dbSelect 设置为选择后的第二次调用更改时选择的值。

非常感谢大家的帮助。

【问题讨论】：

Why do you think it's not right 使用item-text 和item-value?
我读过但现在在我的历史记录中找不到的东西，但是我将如何构建 dbOptions 以使值和文本都可用。这是我最苦恼的一点。
你看过我上面评论中的链接了吗？我给你做了一个例子。
很抱歉，我没有发现它。完美，我显然完全误解了我读到的内容，或者这完全是垃圾。非常感谢。

标签： vue.js vuejs2 axios vuetify.js

【解决方案1】：

我遇到了同样的问题，并认为需要将其添加为解决问题的正确答案。

使用item-text="" 和item-value="" 的属性

<v-select
  :items="dbOptions"
  v-model="dbSelect"
  item-text="name"
  item-value="id"
></v-select>

使用name和id的对象数组

[{"id":1,"name":"A"},{"id":2,"name":"B"},{"id":3,"name":"C"},{"id":4,"name":"D"},{"id":5,"name":"E"}]

See Example

这最初是由 cmets 中的 @Bert 回答的。

【讨论】：