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