Как во Vue.js выполнить 2 события по @click?

Question

[Горгулий Магниевич]

Используется библиотека Vuetify 2, компонент Item Groups, но данная задача подойдет ко всем элементам с toggle.
Код выложил здесь.
Цели задачи следующие:
1) По событию @click="toggle" выполнить еще одно действие (записать во Vuex ключ). Я знаю что для этого нужно создавать метод, но как в методе прописать это действие toggle?
2) Как присвоить индекс элемента идентичным свойству key в массиве items? Мне нужно во Vuex передавать не 0, 1 или 2, а то свойство key выбранного элемента.

Answer 1

[Владимир Сартаков]

Можно просто через запятую перечислить методы:
@click ="toggle($event), clickAction"

*Для работы toggle нужно передавать обьект события $event, по умолчанию, когда прописан один метод, $event - передается автоматически

Answer 2

[Артур Карапетян]

div(@click="multiplyActions")

methods: {
  multiplyActions() {
    this.foo();
    this.bar();
    this.baz();
  },

  foo() {
    console.log(123213);
  },
  
  .....
}

?

Answer 3

[Dmitry Barkowski]

В коде примера же в нормальном направлении движетесь.
Ничего не мешает ведь расширить логику метода.

Comments

[Горгулий Магниевич]

Я повесил второе событие на родительский элемент v-col ))) Не знаю насколько это приемлемо и надежно, работать-то оно работает, но понять как делать 2 и более действий по @click всё равно нужно )

Answer 4

[Kotaro Hiba]

если вдруг кому то понадобится, вот так можно сделать 2 метода по 1му событию

<div
@click="sendRequest('DELETE', {ids: [deleteModal.itemId]}); deleteModal.show = false"
></div>

Answer 5

[Aleksey-Nuzhdin]

Во VUE3 у меня не заработал вариант: @click="foo, bar"
Но отлично работает, сразу с вызовом: @click="foo(), bar()"