Работа с формами в фреймворке Vue

Сейчас мы с вами научимся работе с инпутами в фреймворке Vue. С их помощью мы будем реактивно добавлять данные на страницу. Давайте приступим.

Пусть у нас есть инпут:

<div id="app">
<input>
</div>
Пусть также у нас есть свойство message:

let app = new Vue({
el: '#app',
data: {
message: 'hello',
},
});
Мы можем связать это свойство и инпут таким образом, чтобы изменение любого из них приводило к изменению другого.

Это делается с помощью директивы v-model, в которой указывается свойство, привязанное к инпуту.

Давайте привяжем к нашему инпуту свойство message:

<div id="app">
<input v-model="message">
</div>
Давайте запустим (запустите):

let app = new Vue({
el: '#app',
data: {
message: 'hello',
},
});
<div id="app">
<input v-model="message">
</div>
После запуска в инпуте будет стоять текст свойства message (его текст 'hello').

А вот если поредактировать данные в инпуте - свойство message также изменится соответствующим образом. Чтобы увидеть это, давайте выведем введенное в инпут содержимое где-нибудь в абзаце:

<div id="app">
<input v-model="message">
<p>Введенное сообщение: {{ message }}</p>
</div>
Сразу после запуска и в инпуте, и в абзаце будет стоять текст 'hello'. Если же начать редактировать данные в инпуте - вы увидите, как они одновременно меняются в абзаце под ним.

Давайте убедимся в этом - соберем все вместе и запустим:

let app = new Vue({
el: '#app',
data: {
message: 'hello',
},
});
<div id="app">
<input v-model="message">
<p>Введенное сообщение: {{ message }}</p>
</div>

Изначально пустой инпут
Пусть вы хотите, чтобы изначально инпут был пустым. Для этого в data для свойства message значением поставим пустые кавычки:

let app = new Vue({
el: '#app',
data: {
message: '',
},
});
Это обязательный шаг - если к инпуту привязано свойство, оно обязательно должно быть определено в data (пусть и будет пустым), иначе все будет работать некорректно.

Действие по кнопке
Пусть у нас есть кнопка и инпут, в который вводится число. Давайте по нажатию на кнопку выведем квадрат введенного в инпут числа.

Приступим к реализации.

Давайте для начала сделаем инпут, привяжем к нему свойство num, сделаем кнопку, по клику на которую будет выполнятся метод calc, и сделаем также абзац, в который будет выводится результат (пусть результат будет в свойстве result):

<div id="app">
<p>Результат: {{ result }}</p>
<input v-model="num">
<button v-on:click="calc">Посчитать</button>
</div>
Давайте напишем реализацию метода calc. Внутри него свойство num будет доступно как this.num. Для возведения в квадрат перемножим this.num само на себя, а результат запишем в this.result:

methods: {
calc: function() {
this.result = this.num * this.num;
}
}
Получится, что как только будет вызван метод calc (а это случится по нажатию на кнопку), в свойство result запишется результат и при этом одновременно выведется в нашем абзаце.

Давайте соберем все вместе и запустим:

let app = new Vue({
el: '#app',
data: {
num: null, // изначально числа нет
result: 0,
},
methods: {
calc: function() {
this.result = this.num * this.num;
}
}
});
<div id="app">
<p>Результат: {{ result }}</p>
<input v-model="num">
<button v-on:click="calc">Посчитать</button>
</div>

Из инпута в массив
Пусть у нас в items хранится массив:

let app = new Vue({
el: '#app',
data: {
items: ['a', 'b', 'c', 'd', 'e'],
},
});
И его содержимое выводится на экран в виде списка:

<div id="app">
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
Давайте теперь сделаем инпут и кнопку, по нажатию на которую текст инпута добавится в конец списка в качестве нового пункта:

<div id="app">
<input v-model="newItem">
<button v-on:click="addItem">Добавить</button>
</div>
Для корректной работы инпута добавим в data свойство newItem:

let app = new Vue({
el: '#app',
data: {
newItem: '', // начальное значение инпута
items: ['a', 'b', 'c', 'd', 'e'],
},
});
По нажатию на кнопку будет вызываться метод addItem, который будет добавлять новый элемент в массив items. Текст элемента будет браться из инпута, то есть из this.newItem:

methods: {
addItem: function() {
this.items.push(this.newItem);
}
}
Давайте соберем все вместе и запустим:

let app = new Vue({
el: '#app',
data: {
newItem: '',
items: ['a', 'b', 'c', 'd', 'e'],
},
methods: {
addItem: function() {
this.items.push(this.newItem);
}
}
});
<div id="app">
<input v-model="newItem">
<button v-on:click="addItem">Добавить</button>
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
Запустите код, введите текст в инпут, нажмите на кнопку - и вы увидите, как текст из инпута добавится в конец нашего списка.