Question

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

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

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

非常感谢大家的帮助。

Answer 1

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

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

<v-select
  :items="dbOptions"
  v-model="dbSelect"
  label="Select"
  single-line
  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

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

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

1 个答案: