Vue-ում զանգվածի տարրեր ավելացնելու ձև
Եկեք ռեակտիվ կերպով ավելացնենք տեքստը ինփութից զանգվածի վերջում: Սկսենք իրականացնել: Ենթադրենք, մենք ունենք տրված զանգված.
data() {
return {
items: ['a', 'b', 'c', 'd', 'e'],
}
}
Ավելացնենք newItem հատկությունը,
որը ապահովում է ինփութի աշխատանքը.
data() {
return {
newItem: '',
items: ['a', 'b', 'c', 'd', 'e'],
}
}
Եկեք ցուցադրենք զանգվածի պարունակությունը որպես ցանկ.
<template>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item }}
</li>
</ul>
</template>
Հիմա եկեք ստեղծենք ինփութ և կոճակ, որի սեղմման դեպքում ինփութի տեքստը կավելացվի ցանկի վերջում որպես նոր կետ.
<template>
<input v-model="newItem">
<button @click="addItem">add</button>
</template>
Կոճակը սեղմելու դեպքում կկանչվի addItem մեթոդը,
որը կվերցնի տեքստը ինփութից և կավելացնի այն որպես նոր տարր
զանգվածում, ինչը կհանգեցնի ցանկի ռեակտիվ
փոփոխության.
methods: {
addItem: function() {
this.items.push(this.newItem);
}
}
Տրված է զանգված: Տրված է ինփութ: Տրված է կոճակ:
Ցուցադրեք այս զանգվածի տարրերը որպես ul ցանկ:
Ապահովեք, որ կոճակը սեղմելիս
ցանկի վերջում ավելանա ինփութի տեքստը:
Փոփոխեք նախորդ առաջադրանքն այնպես, որ նոր կետը ավելանա ցանկի սկզբում:
