заполнить vuetify выбрать из массива json - PullRequest
Новая
       8

заполнить vuetify выбрать из массива json

0 голосов
/ 14 декабря 2018

Я новичок в VUEJS, у меня проблемы с заполнением элемента vuetify select именами стран из локального файла JSON, содержащего массив объектов json.Вместо заполнения параметров создаются отдельные объекты выбора для каждой страны.

Вот моя форма .... 

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

Вывод моих кодов

1 Ответ

0 голосов
/ 14 декабря 2018

Вы не должны использовать 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 будет отображаться, в то время как' item-value 'будет полем, которое контролирует значение выбранного параметра.Я выбрал 'id' для этого, но в зависимости от вашего варианта использования вы можете выбрать 'country_code' или что-то еще.

...