LoginSignup
0

More than 3 years have passed since last update.

【Vue.js】VM(view model) をメソッドの引数に渡す方法。

Last updated at Posted at 2020-02-10

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 イベントを渡すことができます:


また1つ賢くなりました。

これで、 メソッド側で DOM にアクションが容易く行えますね。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0