Формы в 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мотрите другие статьи: