Формы в 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" и увидеть как изменяется содержание элемента ниже.
Для каждого "input" элемента с указанной директивой "v-model" должно существовать свойство в "data". Иначе работа Vue станет некорректной.

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

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

Логика будет простой: пользователь пишет новый текст в форму и нажимает кнопку "Добавить". Пункт с этим текстом появляется в списке. Реализуем это:
<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.
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Cмотрите другие статьи:
Была ли статья полезной?
Была ли эта статья полезна? Есть вопрос?
хостинг для сайтов
Закажите недорогой хостинг Заказать

всего от 290 руб

⇡ наверх