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">add</button>
</template>
අදාළ ක්රමය ක්රියාත්මක කරමු:
methods: {
add: function() {
this.arr.push('xxx');
}
}
බොත්තමක් දෙනු ලැබේ. අරාවක් දෙනු ලැබේ. මෙම අරාවේ මූලද්රව්ය ul ලැයිස්තුවක් ලෙස ප්රදර්ශනය කරන්න.
බොත්තම එබූ විට මෙම ලැයිස්තුවේ අවසානයට නව අයිතමයක් එකතු වන පරිදි සකසන්න.
බොත්තමක් දෙනු ලැබේ. අරාවක් දෙනු ලැබේ. මෙම අරාවේ මූලද්රව්ය ul ලැයිස්තුවක් ලෙස ප්රදර්ශනය කරන්න.
බොත්තම එබූ සෑම අවස්ථාවකම ලැයිස්තුවේ පළමු අයිතමය ඉවත් වන පරිදි සකසන්න.
බොත්තමක් දෙනු ලැබේ. අරාවක් දෙනු ලැබේ. මෙම අරාවේ මූලද්රව්ය ul ලැයිස්තුවක් ලෙස ප්රදර්ශනය කරන්න.
බොත්තම එබූ සෑම අවස්ථාවකම ලැයිස්තුවේ අවසාන අයිතමය ඉවත් වන පරිදි සකසන්න.
බොත්තමක් දෙනු ලැබේ. අරාවක් දෙනු ලැබේ. මෙම අරාවේ මූලද්රව්ය ul ලැයිස්තුවක් ලෙස ප්රදර්ශනය කරන්න.
බොත්තම එබූ සෑම අවස්ථාවකම ලැයිස්තුවේ අවසානයට පෙර අයිතමය ඉවත් වන පරිදි සකසන්න.
බොත්තමක් දෙනු ලැබේ. අරාවක් දෙනු ලැබේ. මෙම අරාවේ මූලද්රව්ය ul ලැයිස්තුවක් ලෙස ප්රදර්ශනය කරන්න.
බොත්තම එබූ විට ලැයිස්තු අයිතම වර්ගීකරණය වන පරිදි සකසන්න.
බොත්තමක් දෙනු ලැබේ. අරාවක් දෙනු ලැබේ. මෙම අරාවේ මූලද්රව්ය ul ලැයිස්තුවක් ලෙස ප්රදර්ශනය කරන්න.
බොත්තම එබූ විට ලැයිස්තු අයිතම ප්රතිලෝම අනුපිළිවෙලට සකසන පරිදි සකසන්න.
ව්යතිරේක
JavaScript සීමාවන් හේතුවෙන්, Vueට අරාවේ පහත වෙනස්කම් දැක ගැනීමට නොහැකිය: දර්ශකය මගින් මූලද්රව්යයක් සෘජුව සැකසීම: items[සූචකය]
= නවතම අගය සහ අරාවේ දිග පැහැදිලිව වෙනස් කිරීම, උදාහරණයක් ලෙස: items.length = නවතම දිග.
