初めに
Vuejsのwatchはとても便利で値の変化を監視することができます。
実現したかったこと
- watchで2つの値を監視したい。
とのことで、僕は最初に
test-case1.vue
<template>
<div>
<input type="number" v-model="numberObj1">
<input type="number" v-model="numberObj2">
<p>{{ tashizan }}</p>
</div>
</template>
<script>
data() {
return {
numberObj1: '',
numberObj2: '',
tashizan: ''
}
},
watch: {
numberObj1 & numberObj2 () {
this.tashizan = this.numberObj1 + this.numberObj2;
}
}
</script>
便利なVuejsだしこれで行けるやろ!ってどこかで思ってました。
そんなに世界は甘くはなかった。これでは行けなかった。
結論
sample.vue
<script>
(省略)
computed: {
MathObject() {
return [this.numberObj1,this.numberObj2];
}
},
watch: {
MathObject (val) {
this.tashizan = this.numberObj1 + this.numberObj2;
}
}
</script>
この方法で複数の値を監視することができました。
サンプルコードは短いからみやすいですけど、実業務になってくるとコードが長くなってくるのでこのMathObjectに何があるか分からないため、computedまで確認する必要性があるみたいです。
他の方とコードを共有している場合はコメントアウトなどを利用して変数を書いてあげると親切かもしれませんね。