javascript - 填充 vuetify 从 json 数组中选择

Question

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

这是我的表格......

<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

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