Fomu ya Kuongeza Vipengele Katika Orodha ya Vue

Wacha tuongeze kwa ustadi maandishi kutoka kwa kichujio mwishoni mwa orodha. Tuanze utekelezaji. Tuchukulie tuna orodha ifuatayo:

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

Wacha tuongeze sifa newItem, inayosaidia kufanya kazi ya kichujio:

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

Wacha tuonyeshe yaliyomo kwenye orodha kwa umbizo la orodha:

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

Wacha sasa tufanye kichujio na kifungo, kubonyeza kifungo kitaongeza maandishi ya kichujio mwishoni mwa orodha kama kipengele kipya:

<template>
	<input v-model="newItem">
	<button @click="addItem">add</button>
</template>

Kubonyeza kifungo kitaita mbinu addItem, ambayo itachukua maandishi kutoka kwenye kichujio na kuiongeza kama kipengele kipya katika orodha, jambo litasababisha mabadiliko ya ustadi katika orodha:

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

Imetolewa orodha. Imetolewa kichujio. Imetolewa kifungo. Onyesha vipengele vya orodha hii kwa umbizo la orodha ul. Fanya ili kubonyeza kifungo mwishoni mwa orodha kuongezwe maandishi kutoka kichujio.

Rekebisha kazi iliyopita ili kipengele kipya kiongezwe mwanzoni mwa orodha.