Vue @click 引き数渡し + 複数使う方法を✅

同じタグ内でv-onハンドラを複数使いたい。これまではv-on:clickと@clickに分けていたが、Github Actionsに設定していたvue/no-parsing-errorによって「同一タグ内で同じハンドラは使えません」と拒絶されてしまった。ぴえそぴえそ泣。

今回は、その時のエラー解決ログをまとめたブログとなっている。

v-onを複数使う方法

@click=““もしくはv-on:click=““の後に発火させたいメソッドを記載する。

例えばscriptタグ内でfirstMethod()とsecondMethod()を定義してあり、ボタンを押したら両方発火させたいと考えている場合は以下の通りに記述する。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<template>
<button @click="MethodOne(); MethodTwo()"></button>
</template>

export default{
  // ・・・
  methods: {
    MethodOne(){
      // ・・・
    },
    MethodTwo(){
      // ・・・
    },
  },
};

vue的に複数のメソッドを同一タグ内に記述することはベターとされていない。そういう時は、メソッドを下記のようにラップする。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<template>
<div @click="multipleMethod()"></div>
</template>
<script>
methods: {
    multipleMethod() {
      this.MethodOne()
      this.MethodTwo()
    }
   MethodOne() {
      // ・・・
    }
   MethodTwo() {
      // ・・・
    }
  }
}
</script>

【Vue】v-onで複数の関数を呼び出す方法 - Qiita

今回実装したかったこと

クリックしたらstateの変更(update)及び次の項目に飛ばす

メソッドには下記のように定義してある。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<script>
export default{
// ・・・
methods:{
#クリックしたらstateを更新する。
countAnswer(indexNum, updAnswer) {
      this.updateAnswer({ indexNum, updAnswer });
    },
clickScroll(e) {
#クリックしたら現在の座標を取得し、水平方向に0,垂直方向に現在のスクロール量 + 次の座標コンテナのtop部分の量だけ移動する。
      const targetArea = e.currentTarget.getBoundingClientRect();
      window.scrollTo(0, window.pageYOffset + targetArea.top);
    },
}
</script>

この二つのメソッドを同時に発火させるために当初は下記のように書いていた。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<v-radio
    class="mx-auto justify-center"
    fab
    light
    :ripple="{ center: false, class: 'gray--text' }"
    v-on:click="clickScroll"
    @click="countAnswer(question.num, 3)"
    label="3: 全くない"
>
</v-radio>

同一タグ内で強引にv-on:clickと@clickを使っている。これはこれで動くのだが、vue-no-parsing-error的にはアウトらしい。

試しに冒頭で書いた内容に変えてみた。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<v-radio
    class="mx-auto justify-center"
    fab
    light
    :ripple="{ center: false, class: 'gray--text' }"
    v-on:click="clickScroll; countAnswer(question.num, 3);"

    label="3: 全くない"
    >
</v-radio>

だが、これだと「currentTargetが見つかりません」というエラーを吐き出し、動かなくなってしまった。引数をうまく渡せていないみたい。

どうしよ〜と思い、「v-on click 引数複数」と調べたら下記記事にヒット。

複数のv-on:clickを記述するとクリックした要素を取得できない｜teratail

まんま同じ内容で悩んでいらっしゃった。助かる。

どうやら、引数を渡すためには、v-onで書くメソッド名()の中に$eventを書けば良いそうで。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<v-radio
    class="mx-auto justify-center"
    fab
    light
    :ripple="{ center: false, class: 'gray--text' }"
                        v-on:click=""
    @click="clickScroll
    clickScroll($event);
    countAnswer(question.num, 3);
    "
    label="3: 全くない"
>
</v-radio>

このように、clickScrollの中に$eventを書いたら正常に動いた。

before

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<v-radio
    class="mx-auto justify-center"
    fab
    light
    :ripple="{ center: false, class: 'gray--text' }"
    v-on:click="clickScroll"
    @click="countAnswer(question.num, 3)"
    label="3: 全くない"
    >
</v-radio>

after

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<v-radio
    class="mx-auto justify-center"
    fab
    light
    :ripple="{ center: false, class: 'gray--text' }"
    v-on:click=""
    @click="clickScroll
    clickScroll($event);
    countAnswer(question.num, 3);
    "
    label="3: 全くない"
    >
</v-radio>

所感

Github Actionsって優秀だ。