Vue တွင် Array အချက်များထည့်သွင်းရန် ဖော်မအပ်တစ်ခု

input မှစာသားကို array ၏အဆုံးသို့ reactively ထည့်သွင်းကြပါစို့။ အကောင်အထည်ဖော်မှုကို စတင်လိုက်ပါ။ ကျွန်ုပ်တို့တွင် array တစ်ခုပေးထားပါစေ။

data() {
	return {
		items: ['a', 'b', 'c', 'd', 'e'],
	}
}

ကိုလုပ်ဆောင်ရန် ပံ့ပိုးသည့် newItem property တစ်ခုကို ထည့်ကြမည်။

data() {
	return {
		newItem: '',
		items: ['a', 'b', 'c', 'd', 'e'],
	}
}

Array ၏ပါဝင်သည်များကို list တစ်ခုအနေဖြင့် ထုတ်ပြကြမည်။

<template>
	<ul>
		<li v-for="(item, index) in items" :key="index">
			{{ item }}
		</li>
	</ul>
</template>

ယခု တစ်ခုနှင့် button တစ်ခုကို ပြုလုပ်ကြပါစို့၊ ထို button ကိုနှိပ်လိုက်သောအခါ ၏စာသားသည် list အသစ်တစ်ခု၏ item အဖြစ် list ၏အဆုံးတွင် ထည့်သွင်းသွားမည်။

<template>
	<input v-model="newItem">
	<button @click="addItem">ထည့်မည်</button>
</template>

Button ကိုနှိပ်လိုက်သောအခါ addItem method ကိုခေါ်မည်၊ ထို method သည် မှစာသားကိုယူကာ array ထဲသို့ အချက်အသစ်တစ်ခုအဖြစ် ထည့်သွင်းမည်၊ ထိုသို့ဖြင့် list ၏ reactive ပြောင်းလဲမှုကို ဖြစ်ပေါ်စေမည်။

methods: {
	addItem: function() {
		this.items.push(this.newItem);
	}
}

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

ယခင်ကာလတုန်းကလုပ်ဆောင်ချက်ကို ပြင်ဆင်ပါ၊ အချက်အသစ်သည် list ၏အစတွင် ထည့်သွင်းသွားရန် ဖြစ်သည်။