"आप वी-मॉडल को सीधे वी-फॉर इयरेशन एलियास के लिए बाध्य कर रहे हैं"

Question

बस इस त्रुटि में भाग लें, मुझे इससे पहले सामना नहीं हुआ था: "आप वी-मॉडल को सीधे वी-मॉडल के लिए बाध्यकारी कर रहे हैं। यह नहीं होगा v-स्रोत स्रोत सरणी को संशोधित करने में सक्षम हो क्योंकि उपनाम को लिखना एक फ़ंक्शन स्थानीय चर को संशोधित करने जैसा है। ऑब्जेक्ट्स की सरणी का उपयोग करने पर विचार करें और इसके बजाय किसी ऑब्जेक्ट प्रॉपर्टी पर v-model का उपयोग करें। " मैं थोड़ी परेशान हूं, क्योंकि मैं कोई भी गलत काम नहीं कर रहा हूं।

<tr v-for="(run, index) in this.settings.runs"> 

    <td> 
     <text-field :name="'run'+index" v-model="run"/> 
    </td> 

    <td> 
     <button @click.prevent="removeRun(index)">X</button> 
    </td> 

</tr> 

त्रुटि संदेश प्रतीत होता है: अन्य v-के लिए से फर्क सिर्फ इतना है कि मैंने पहले छोरों का उपयोग किया है कि यह एक, एक छोटे से सरल है कि यह बस के बजाय वस्तुओं की तुलना, तार की एक सरणी के माध्यम से पाशन है यह सुझाव देने के लिए कि मुझे वास्तव में चीजों को थोड़ा और जटिल बनाने की आवश्यकता है, और सरल स्ट्रिंग्स के बजाय ऑब्जेक्ट्स का उपयोग करना है, जो किसी भी तरह से मेरे लिए सही नहीं लगता है। क्या मैं कुछ भूल रहा हूँ?

Answer 1

जब से तुम v-model उपयोग कर रहे हैं, तो आप इनपुट क्षेत्र से run मान को अद्यतन करने में सक्षम होने की उम्मीद (text-field एक घटक पाठ इनपुट क्षेत्र के आधार पर है, मुझे लगता है)।

संदेश आपको बता रहा है कि आप सीधे v-for उपनाम (जो run है) को सीधे संशोधित नहीं कर सकते हैं। वांछित तत्व के संदर्भ में आप index का उपयोग कर सकते हैं। आप इसी तरह indexremoveRun में उपयोग करेंगे।

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    settings: { 
 
     runs: [1, 2, 3] 
 
    } 
 
    }, 
 
    methods: { 
 
    removeRun: function(i) { 
 
     console.log("Remove", i); 
 
     this.settings.runs.splice(i,1); 
 
    } 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script> 
 
<table id="app"> 
 
    <tr v-for="(run, index) in settings.runs"> 
 

 
    <td> 
 
     <input type="text" :name="'run'+index" v-model="settings.runs[index]" /> 
 
    </td> 
 

 
    <td> 
 
     <button @click.prevent="removeRun(index)">X</button> 
 
    </td> 
 

 
    <td> 
 
     {{run}} 
 
    </td> 
 

 
    </tr> 
 
</table>