Методы и события в Vue (часть 2)

В прошлой статье "Методы и события в Vue" мы рассмотрели способ создания и использования своих собственных методов. Давайте воспользуемся нашими предыдущими примерами и научимся передавать параметры в метод и вызывать один метод внутри другого.

Передать параметр в метод

В прошлой нашей задаче мы рассматривали способ изменить текст при клике на кнопку "Изменить текст". Для этого был создан метод "changeText", который производил все изменения. Код получился такой:

<div id="application">
   {{ text }}
   <span v-on:click="changeText">Изменить текст</span>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         text: 'Тише, мыши, кот на крыше'
      },
      methods: {
         changeText: function() {
            this.text = 'А котята ещё выше';
         }
      },
   });
</script>

Теперь давайте представим, что в методе "changeText" (настройки "methods") поставляемая строка задаётся в виде аргумента функции. Значение этого аргумента мы вынесем в кнопку, то есть у нас получится атрибут "v-on:click" со зрачением в виде "changeText('А котята ещё выше')". Внесём эти изменения в пример, тогда код будет выглядеть так:

<div id="application">
   {{ text }}
   <span v-on:click="changeText('А котята ещё выше')">Изменить текст</span>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         text: 'Тише, мыши, кот на крыше'
      },
      methods: {
         changeText: function(change_text) {
            this.text = change_text;
         }
      },
   });
</script>

Получившийся код делает абсолютно то же самое, что и его предшественник: заменяет строку "Тише, мыши, кот на крыше" на "А котята ещё выше". Но разберёмся подробнее что же происходит пир нажатии на кнопку "Изменить текст".

Если кликнуть на "Изменить текст", то срабатывает функция changeText('А котята ещё выше'). Как можно заметить, в первом аргументе этой функции стоит строка. Теперь посмотрите на место определения этой функции в коде: changeText: function(change_text). Внутри функции эта строка доступна в переменной "change_text". И в конце концов именно значение аргумента подставляется в текст this.text = change_text;

Вызов одного метода из другого

Из одного метода можно вызывать другой. Делается это с помощью this. Попробуем изменить предыдущий пример так, чтобы он содержал несколько вспомогательных методов, которые вызываются из родительского.

<div id="application">
   {{ text }}
   <span v-on:click="DoAction('А котята ещё выше')">Изменить текст</span>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         text: 'Тише, мыши, кот на крыше'
      },
      methods: {
         // изменение текста
         changeText: function(txt) {
            this.text = txt;
         },
         // всплывающее окно с предупреждением
         showAlert: function() {
            alert('Текст был изменён');
         },
         
         // основная функция, выполняется при клике на кнопку
         DoAction: function(change_text) {
            this.changeText(change_text); // меняет текст
            this.showAlert(); // показывает предупреждение
         },
      },
   });
</script>

Как можно заметить, при клике на "Изменить текст" будет выполняться метод "DoAction", внутри которого последотвально вызываются два метода: "changeText" и "showAlert". Причём метод "changeText" получает в качестве аргумента значения такогого от "DoAction".

Обычно так код выносят во вспомогательные методы для упрощения и повторного использования кусков кода.

Создание элемента, на который можно кликнуть

Во всех предыдущих примерах мы не пробовали динамически создавать элементы, которые имеют атрибут "v-on:click". Мы их задавали изначально. Но давайте попробуем сделать это, создав элементы из цикла так, что на них можно будет кликнуть. Вспомним нашу простуйшую заготовку для вывода элементов массива:

<div id="application">
   <ul>
      <li v-for="(item, index) in items">{{ item }}</li>
   </ul>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         items: ['Тише', 'мыши', 'кот', 'на', 'крыше']
      },
   });
</script>

Теперь к тегу <li> добавим атрибут "v-on:click", чтобы созданные элементы стали интерактивными:

<div id="application">
   <ul>
      <li v-for="(item, index) in items" v-on:click="alert(item)">
         {{ item }}
      </li>
   </ul>
</div>
<script>
   let app = new Vue({
      'el' : '#application',
      data: {
         items: ['Тише', 'мыши', 'кот', 'на', 'крыше']
      },
   });
</script>

Теперь при клике на строку списка будет появляться всплывающее сообщение, в котором будет содержаться текст равный тексту пункта списка (благодаря "alert(item)").

Удаление элемента при клике на него

Давайте немного усложним наш предыдущий пример. Изменим код примера так, чтобы при клике на элемент списка происходило его удаление. Использовать функции javascript для удаления DOM элемента мы не будем, достаточно будет удалить нужный элемент из ммассива "items", а Vue самостоятельно перестроить HTML код страницы, чтобы не показывать удалённые элементы.

Единственное что нам тут понадобится - это функция "splice(индекс, длина)". Эта функция удаляет несколько элементов массива (второй аргумент "длина" отвечает за количество), начиная с определённого индекса. Так как удалять будем только один элемент, то вместо второго аргумента "длина" поставим единицу 1. А первый аргумент "индекс" будем передавать через аргумент функции, которая стоит на клике по пункту списка. Таким образом сделаем метод "remove":

<div id="application">
   <ul>
      <li v-for="(item, index) in items" v-on:click="remove(index)">
         {{ item }}
      </li>
   </ul>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         items: ['Тише', 'мыши', 'кот', 'на', 'крыше']
      },
      methods: {
         remove: function(idx) {
            this.items.splice(idx, 1);
         },
      },
   });
</script>

Попробуйте загрузить страницу с таким кодом. При клике на элементе списка он будет пропадать. Так же будет пропадать и элемент из массива "items", из настройки "data".