私は同じ関数を呼び出す必要があるいくつかのウォッチャーを持っています。複数のウォッチャー同じ関数vue.js
watch: {
'param.a' (nv) {
this.calc();
}
,'param.b' (nv) {
this.calc();
}
,'param.c' (nv) {
this.calc();
}
}
'param.a,param.b,param.c' (nv) {...}の行に沿って何か？
編集：これは実際のコードではありませんが、計算されたプロパティは使用できません。
計算されたプロパティを使用できない理由はわかりませんが、下のデモやfiddleのようにcreatedフックにウォッチャーを追加することは可能でしょうか。
私は配列の時計がvueに実装されていないと思います。 SOにも、Vue 1.xの構文と同様の質問があります。 （時計がマウントされたフックに追加されていますが、DOMを準備する準備が整うのを待つ必要はありません）とにかくこれも機能します。 。ミックスインとES6矢印機能に変更されました。
Vue.mixin({
methods: {
watchCollection(arr, cb) {
arr.forEach((val) => this.$watch(val, cb))
}
}
})
new Vue({
el: '#app',
/*watch: {
'param.a' (nv) {
this.calc();
}
,'param.b' (nv) {
this.calc();
}
,'param.c' (nv) {
this.calc();
}
\t },*/
/* // not suported
\t watch: {
['param.a', 'param.b', 'param.c'] : (nv) {
this.calc();
}
\t },*/
created() {
this.watchCollection(
['param.a', 'param.b', 'param.c'],
this.calc)
},
computed: {
resultComputed() {
return this.calc();
}
},
methods: {
calc() {
let a = parseInt(this.param.a);
let b = parseInt(this.param.b);
let c = parseInt(this.param.c);
this.result = a + b + c;
return this.result;
}
},
data() {
return {
param: {
a: 0,
b: 0,
c: 0
},
// msg: 'hello',
result: 0
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="app">
<input v-model="param.a" />
<input v-model="param.b" />
<input v-model="param.c" />{{result}} {{resultComputed}}
<!--{{msg}}-->
</div>
合計は申し訳ありません – AldoRomo88
簡単になります 'computed'する必要があり、私は単純に計算されたプロパティを使用して逃げることができない、最初から述べてきたはずです。 – andrei