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”或其他名称。

从json数组中填充vuetify select

1 个答案: