はじめに
Vue.jsとVuetifyを使用したSPAアプリケーションを作成中に以下エラーが発生しました。
[Vue warn]: Error in v-on handler: "TypeError: handler.apply is not a function
こちらを解決していきます。
環境
OS: macOS Catalina 10.15.1
Vue: 2.6.10
vuetify: 2.1.0
何をしたかったのか
v-forでv-listをリストレンダリングし、それぞれの項目に対して以下２点を動的に変更したいと考えました。
-
router-linkの行き先 -
v-onディレクティブで発火するイベント
この2がうまくいかず、ブラウザのコンソールにはタイトルにあるエラーが発生していました。
まずは元のコードを示します。
元のコード
Sample.vue
<template>
<!-- 略 -->
<v-list>
<v-list-item
v-for="item in items"
:key="item.id"
@click="item.action"
>
<router-link :to="{ name: item.link }">
<v-list-item-title>
{{ item.name }}
</v-list-item-title>
</router-link>
</v-list-item>
</v-list>
<!-- 略 -->
</template>
<script>
export default {
data() {
return {
items: [
{id: 1, name: '1へのリンク', link: 'Component1', action: ''},
{id: 2, name: '2へのリンク', link: 'Component2', action: ''},
{id: 3, name: 'action1を実行', link: '', action: 'action1'},
{id: 4, name: 'action2を実行', link: '', action: 'action2'},
]
}
},
methods: {
action1() {
anyAction1()
},
action2() {
anyAction2()
}
}
}
</script>
これで、router-linkは動的に変更できていましたが、methodsに定義したaction1, action2が発火しませんでした。
次に解決したコードを示します。
解決したコード(変更部周辺のみ抜粋)
Sample.vue
<template>
<!-- 略 -->
<v-list-item
v-for="item in items"
:key="item.id"
@click="triggerClick(item.action)"
>
<!-- 略 -->
</template>
<script>
export default {
// 略
methods: {
triggerClick(action) {
if (action === action1) {
anyAction1()
} else if (action === action2) {
anyAction2()
}
}
}
</script>
改善したポイント
-
v-list-item内の@click="triggerClick(item.action)"と、動的な引数を渡した -
methods内でその動的な引数に応じて発火するイベントの内容を変化させた
おわりに
最後まで読んで頂きありがとうございました
どなたかの参考になれば幸いです