从 json 数组中填充 vuetify 选择

Question

我是 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"...]
    },
    {
        ...
    }
]

我的代码的输出

Answer 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”或其他内容。