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

Модифицируйте предыдущую задачу так, чтобы новый пункт добавлялся в начало списка.

← →
↑