Форма для добавления элементов массива в 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.
Сделайте так, чтобы по нажатию на кнопку
в конец списка добавился текст из инпута.
Модифицируйте предыдущую задачу так, чтобы новый пункт добавлялся в начало списка.