VUEJS के लिए एक नौसिखिया हूँ, एक स्थानीय 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"...]
    },
    {
        ...
    }
]

मेरे कोड का आउटपुट

1
joekenpat 14 पद 2018, 19:23

1 उत्तर

सबसे बढ़िया उत्तर

आपको v-select घटक में डेटा जोड़ने के लिए v-for का उपयोग नहीं करना चाहिए, आपको केवल 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>

नोट 'आइटम-नाम' नियंत्रित करेगा कि आपके आइटम ऑब्जेक्ट में कौन सा फ़ील्ड प्रदर्शित होगा, जबकि 'आइटम-वैल्यू' वह फ़ील्ड होगा जो चयनित विकल्प मान को नियंत्रित करता है। मैंने उसके लिए 'आईडी' चुना लेकिन आपके उपयोग के मामले के आधार पर आप 'देश_कोड' या कुछ और चुन सकते हैं।

5
Paul 14 पद 2018, 17:03