Формы в Vue

В фреймворке Vue работа с формой происходит особым образов. Поля формы синзронизируются с свойствами (в "data"). При изменении одних происходит автоматическое изменение других. Всё происходит благодаря указанию директивы v-model в элементах формы. Продемонстрируем это на примере тега input:

<div id="application">
   <input v-model="text">
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         text: 'Тише, мыши, кот на крыше'
      },
   });
</script>

После загрузки страницы с таким кодом можно будет увидеть поле для ввода сообщения с текстом "Тише, мыши, кот на крыше".

Попробуем доработать пример, чтобы при изменении текста в поле можно было увидеть изменение свойства "text" в "data"

<div id="application">
   <input v-model="text">
   <p>Переменная "text" содержит: {{ text }}</p>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         text: 'Тише, мыши, кот на крыше'
      },
   });
</script>

Теперь попробуйте поменять текст в поле "input" и увидеть как изменяется содержание элемента ниже.

Массивы в формы

В прошлых статьях мы пробовали удалить элементы списка по нажатию на кнопку. Давайте теперь попробуем сделать список, в который можно добавлять элементы. Для добавления поставим над списком форму для ввода текста и кнопку "Добавить".

Логика будет простой: пользователь пишет новый текст в форму и нажимает кнопку "Добавить". Пункт с этим текстом появляется в списке. Реализуем это:

<div id="application">
   <input v-model="text">
   <button v-on:click="AddItem">Добавить</button>
   <ul>
      <li v-for="item in items">{{ item }}</li>
   </ul>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         text: '',
         items: ['Мышь', 'Кот', 'Котята']
      },
      methods: {
         AddItem: function() {
            this.items.push(this.text);
         },
      },
   });
</script>

Попробуйте запустить такой код и проверить правильность выполнения логики программы. Список элементов ul должен перестраиваться автоматически, потому что добавление элемента в массив черех "push" отслеживается Vue.