Vue には、 Vue インスタンス と呼ばれるものがある
(vue インスタンスについてはこちら参照)
メソッドの呼び元の Vue インスタンスへのアクセスは極めて簡単であった。
やりたいこと
template から method を呼んで、
呼んだタグを変数で扱いたい。
知ってた方法
vue インスタンスは以下のようにして取得ができる。
メソッドのコール元で、引数を指定しなかった場合、
メソッドの第1引数にわかってくるのである。
<template>
<div v-on:click=clickAction></div>
</template>
<script>
export default {
methods: {
/**
* @param {Object} vm view model
*/
clickAction(vm) {
console.log(vm)
}
}
}
</script>
知らなかった方法
しかし、呼び元で、vue インスタンス以外の値を引数で渡したい場合はどうなるのか
失敗例
<template>
<div v-on:click="clickAction('hoge')"></div>
</template>
<script>
export default {
methods: {
/**
* @param {Object} vm "view model"
* @param {String} str "meta variable"
*/
clickAction(vm, str) {
console.log(vm)
console.log(str)
}
}
}
</script>
これだとダメなのですね
実はこれですと
console.log(vm)
=> hoge
console.log(str)
=> undefined
となってしまい、
template から入れた第1引数は、そのまま第1引数に入ってしまい、
第2引数無しでメソッドを呼んでしまう。
成功例
なので答えは以下です。
<template>
<div v-on:click="clickAction($event, 'hoge')"></div>
</template>
<script>
export default {
methods: {
/**
* @param {Object} vm "view model"
* @param {String} str "meta variable"
*/
clickAction(vm, str) {
console.log(vm)
console.log(str)
}
}
}
</script>
メソッドの引数に
$envent を渡してあげます。
公式 に書いてありました。
時には、インラインステートメントハンドラでオリジナルの DOM イベントを参照したいこともあるでしょう。特別な $event 変数を使うことでメソッドに DOM イベントを渡すことができます:
また１つ賢くなりました。
これで、 メソッド側で DOM にアクションが容易く行えますね。