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>
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>
何も呼び出されない。