从 json 数组中填充 vuetify 选择答案

【问题标题】：populate vuetify select from an array of json从 json 数组中填充 vuetify 选择
【发布时间】：2019-05-15 22:40:28
【问题描述】：

我是 VUEJS 的新手，在使用包含 json 对象数组的本地 JSON 文件中的国家/地区名称填充 vuetify 选择元素时遇到问题。它不是填充选项，而是为每个国家/地区创建单个选择对象。

这是我的表格....

<form>
  <v-select v-validate="'required'" v-bind="countryData"
  v-for="item in countryData" :key="item.name" :items="item.name"
  v-model="select" :error-messages="errors.collect('country')"
  label="Country" data-vv-name="country" prepend-icon="mdi-flag"
  required></v-select>
 </form>

这是我的脚本.....

<script>
import Vue from "vue";
import VeeValidate from "vee-validate";
import countryData from '@/components/countryData.json';
Vue.use(VeeValidate);
export default {
  name: "signup",
  $_veeValidate: {
    validator: "new"
  },
  data: () => ({
    countryData: countryData,
    country: ''
    })
</script>

这里是 JSON 文件结构...

[
    {
        "id": 1,
        "name": "Afghanistan",
        "iso3": "AFG",
        "iso2": "AF",
        "country_code": "4",
        "phone_code": "93",
        "capital": "Kabul",
        "currency": "AFN",
        "states": ["Badakhshan","Badgis"...]
    },
    {
        ...
    }
]

Output of my codes

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

您不应该使用v-for 向v-select 组件添加数据，您只需将contryData 作为items 属性的值传递：

 <v-select v-validate="'required'"  
    :items="countryData"
    item-text='name'
    item-value='id'
    v-model="country" 
    :error-messages="errors.collect('country')"
  label="Country" data-vv-name="country" prepend-icon="mdi-flag"
 required></v-select>

注意“item-name”将控制显示项目对象中的哪个字段，而“item-value”将是控制所选选项值的字段。我为此选择了“id”，但根据您的用例，您可能会选择“country_code”或其他内容。

【讨论】：