fohte.log

https://fohte.net に移行しました

vue.js の v-on で複数の関数を呼び出す

やりたいこと

keyup 時に Vue インスタンスで定義した関数を 3 つ呼び出したい

実装

js

new Vue({
  el: '#vue-container',
  methods: {
    func1: function() {
      console.log('func1');
    },
    func2: function() {
      console.log('func2');
    },
    func3: function() {
      console.log('func3');
    }
  }
});

html

無理やりな方法
<div id="vue-container">
  <input
      v-model="something"
      v-on="keyup: func1, keyup: func2, keyup: func3"
  >
</div>

複数回定義する。これでもいける。

演算子を使う方法
<div id="vue-container">
  <input
      v-model="something"
      v-on="keyup: func1() + func2() + func3()"
  >
</div>

気持ち悪いけどこれでいける。+ に限らず -/, >> 等でも動く。色々と試したところ、算術演算子とビット演算子が使用できるっぽい。あと、括弧外すと動かない。

適当に試したもの

<div id="vue-container">
  <input
      v-model="something"
      v-on="keyup: func1, func2, func3"
  >
</div>

func1() だけ呼び出される。

<div id="vue-container">
  <input
      v-model="something"
      v-on="keyup: func1(); func2(); func3();"
  >
</div>

func1() だけ呼び出される。

<div id="vue-container">
  <input
      v-model="something"
      v-on="keyup: func1 func2 func3"
  >
</div>

何も呼び出されない。

<div id="vue-container">
  <input
      v-model="something"
      v-on="keyup: func1 + func2 + func3"
  >
</div>

何も呼び出されない。