从 json 对象数组中 vuetify v-select 选项

Question

我正在尝试从 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 设置为选择后第二次调用更改时选择的值。

非常感谢大家的帮助。

Answer 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"}]

见示例

这最初是由@Bert在评论中回答的。