Vue में ऐरे रिएक्टिविटी
v-for के माध्यम से प्रदर्शित ऐरे में परिवर्तन होने पर भी
रिएक्टिविटी काम करती है।
आइए एक उदाहरण के लिए ऐसा करें कि
बटन दबाने पर एक नया तत्व ऐरे में रिएक्टिव रूप से
जोड़ा जाए और परिवर्तन
तुरंत स्क्रीन पर भी दिखाई दें।
आइए वर्णित को लागू करें। मान लें कि हमारे पास एक ऐरे है:
data() {
return {
arr: ['a', 'b', 'c'],
}
}
आइए इस ऐरे के तत्वों को एक लूप में प्रदर्शित करें:
<template>
<p v-for="elem in arr">
{{ elem }}
</p>
</template>
आइए एक बटन बनाएं, जिसे दबाने पर ऐरे में एक नया तत्व जोड़ा जाएगा:
<template>
<p v-for="elem in arr">
{{ elem }}
</p>
<button @click="add">जोड़ें</button>
</template>
आइए संबंधित मेथड लागू करें:
methods: {
add: function() {
this.arr.push('xxx');
}
}
एक बटन दी गई है। एक ऐरे दिया गया है। इस ऐरे के तत्वों को
ul सूची के रूप में प्रदर्शित करें। ऐसा करें
कि बटन दबाने पर इस सूची के अंत में एक नया आइटम जुड़ जाए।
एक बटन दी गई है। एक ऐरे दिया गया है। इस ऐरे के तत्वों को
ul सूची के रूप में प्रदर्शित करें। ऐसा करें
कि हर बार बटन दबाने पर
सूची का पहला आइटम हट जाए।
एक बटन दी गई है। एक ऐरे दिया गया है। इस ऐरे के तत्वों को
ul सूची के रूप में प्रदर्शित करें। ऐसा करें
कि हर बार बटन दबाने पर
सूची का अंतिम आइटम हट जाए।
एक बटन दी गई है। एक ऐरे दिया गया है। इस ऐरे के तत्वों को
ul सूची के रूप में प्रदर्शित करें। ऐसा करें
कि हर बार बटन दबाने पर
सूची का दूसरा अंतिम आइटम हट जाए।
एक बटन दी गई है। एक ऐरे दिया गया है। इस ऐरे के तत्वों को
ul सूची के रूप में प्रदर्शित करें। ऐसा करें
कि बटन दबाने पर
सूची के आइटम्स क्रमबद्ध हो जाएं।
एक बटन दी गई है। एक ऐरे दिया गया है। इस ऐरे के तत्वों को
ul सूची के रूप में प्रदर्शित करें। ऐसा करें
कि बटन दबाने पर
सूची के आइटम्स उल्टे क्रम में व्यवस्थित हो जाएं।
अपवाद
JavaScript की सीमाओं के कारण, Vue
ऐरे में निम्नलिखित परिवर्तनों को नोटिस नहीं कर पाता है: इंडेक्स द्वारा
सीधे तत्व सेट करना: items[कुंजी] = नया_मान और ऐरे की लंबाई
में स्पष्ट परिवर्तन, उदाहरण के लिए: items.length = नई_लंबाई।
