Vue တွင် Array များ၏ Reactivity

v-for ဖြင့် ဖော်ပြထားသော array များတွင် ပြောင်းလဲမှုများဖြစ်သည့်အခါ reactivity သည် လုပ်ဆောင်ပါသည်။ ဥပမာအနေဖြင့် ခလုတ်တစ်ခုကို နှိပ်လိုက်သည့်အခါ array ထဲသို့ အရာဝတ္ထုအသစ်တစ်ခု reactively ထည့်သွင်းပြီး ပြောင်းလဲမှုများကို စကရင်ပေါ်တွင် ချက်ချင်း ဖြစ်ပေါ်စေမည့် နည်းလမ်းကို လုပ်ဆောင်ကြည့်ပါမည်။

ဖော်ပြပါအရာကို အကောင်အထည်ဖော်ကြပါစို့။ ကျွန်ုပ်တို့ထံတွင် အောက်ပါ array ရှိသည်ဆိုပါစို့။

data() {
	return {
		arr: ['a', 'b', 'c'],
	}
}

ဤ array ၏ အရာဝတ္ထုများကို loop ဖြင့် ဖော်ပြပါမည်။

<template>
	<p v-for="elem in arr">
		{{ elem }}
	</p>
</template>

ခလုတ်တစ်ခုကို ဖန်တီးပါမည်။ ၎င်းကို နှိပ်လိုက်သည့်အခါ array ထဲသို့ အရာဝတ္ထုအသစ်တစ်ခု ထည့်သွင်းပေးမည်ဖြစ်သည်။

<template>
	<p v-for="elem in arr">
		{{ elem }}
	</p>
	<button @click="add">add</button>
</template>

သက်ဆိုင်ရာ method ကို အကောင်အထည်ဖော်ပါမည်။

methods: {
	add: function() {
		this.arr.push('xxx');
	}
}

ခလုတ်တစ်ခုကို ပေးထားသည်။ Array တစ်ခုကို ပေးထားသည်။ ဤ array ၏ အရာဝတ္ထုများကို စာရင်း ul အဖြစ်ဖြင့် ဖော်ပြပါ။ ခလုတ်ကို နှိပ်လိုက်သည့်အခါ ဤစာရင်း၏ နောက်ဆုံးတွင် အချက်အလက်အသစ်တစ်ခု ထည့်သွင်းပေးမည့် နည်းလမ်းကို လုပ်ဆောင်ပါ။

ခလုတ်တစ်ခုကို ပေးထားသည်။ Array တစ်ခုကို ပေးထားသည်။ ဤ array ၏ အရာဝတ္ထုများကို စာရင်း ul အဖြစ်ဖြင့် ဖော်ပြပါ။ ခလုတ်ကို နှိပ်လိုက်သည့်အခါတိုင်း စာရင်းမှ ပထမဆုံးအချက်အလက်ကို ဖယ်ရှားပေးမည့် နည်းလမ်းကို လုပ်ဆောင်ပါ။

ခလုတ်တစ်ခုကို ပေးထားသည်။ Array တစ်ခုကို ပေးထားသည်။ ဤ array ၏ အရာဝတ္ထုများကို စာရင်း ul အဖြစ်ဖြင့် ဖော်ပြပါ။ ခလုတ်ကို နှိပ်လိုက်သည့်အခါတိုင်း စာရင်းမှ နောက်ဆုံးအချက်အလက်ကို ဖယ်ရှားပေးမည့် နည်းလမ်းကို လုပ်ဆောင်ပါ။

ခလုတ်တစ်ခုကို ပေးထားသည်။ Array တစ်ခုကို ပေးထားသည်။ ဤ array ၏ အရာဝတ္ထုများကို စာရင်း ul အဖြစ်ဖြင့် ဖော်ပြပါ။ ခလုတ်ကို နှိပ်လိုက်သည့်အခါတိုင်း စာရင်းမှ ဒုတိယမြောက် နောက်ဆုံးအချက်အလက်ကို ဖယ်ရှားပေးမည့် နည်းလမ်းကို လုပ်ဆောင်ပါ။

ခလုတ်တစ်ခုကို ပေးထားသည်။ Array တစ်ခုကို ပေးထားသည်။ ဤ array ၏ အရာဝတ္ထုများကို စာရင်း ul အဖြစ်ဖြင့် ဖော်ပြပါ။ ခလုတ်ကို နှိပ်လိုက်သည့်အခါ စာရင်းရှိ အချက်အလက်များကို အစဉ်လိုက် စီပေးမည့် နည်းလမ်းကို လုပ်ဆောင်ပါ။

ခလုတ်တစ်ခုကို ပေးထားသည်။ Array တစ်ခုကို ပေးထားသည်။ ဤ array ၏ အရာဝတ္ထုများကို စာရင်း ul အဖြစ်ဖြင့် ဖော်ပြပါ။ ခလုတ်ကို နှိပ်လိုက်သည့်အခါ စာရင်းရှိ အချက်အလက်များကို ပြောင်းပြန်အစဉ်အတိုင်း စီပေးမည့် နည်းလမ်းကို လုပ်ဆောင်ပါ။

ခြွင်းချက်များ

JavaScript ၏ ကန့်သတ်ချက်များကြောင့်၊ Vue သည် array အတွင်းရှိ အောက်ပါ ပြောင်းလဲမှုများကို သတိပြုမိရန် မစွမ်းဆောင်နိုင်ပါ။ index အလိုက် အရာဝတ္ထုကို တိုက်ရိုက် သတ်မှတ်ခြင်း- items[သော့] = အသစ်တန်ဖိုး နှင့် array ၏ length ကို ရှင်းလင်းစွာ ပြောင်းလဲခြင်း၊ ဥပမာ- items.length = အသစ်အရှည် တို့ဖြစ်သည်။