Vue.js クリックした要素をリアクティブに変更するには

Question

Vue.js 3日目の初心者です。

methods に以下のような処理を追加しています。

やりたいこと

現在の合計値: presentSum が 最大値を超えている場合、
リアクティブにクリックした要素のデータを更新（マイナス1）したい、ということです。

max_chk: function (event) {
    let presentSum = this.sumRows();
    if (presentSum >= this.maxNum) {
        event.target.value = event.target.value - 1;
    }
},

###　何が問題か
上記の方法では、「リアクティブ」にはデータが変更されません。
DOM 要素を更新しているだけで、クリックした要素とデータバインディングしている別要素とは連携がとれていません。
一見、うまくいったように見えるのですが、別要素をクリックすると、そちらの値に上書きされてしまいます。

** 4/12 追記: 質問を少し変更します。**
max_chk のメソッドの引数にデータバインディングしている要素の名前を入れ、
methods 内で受け取って、その名前を元に処理をするにはどうしたらいいでしょうか？
** 4/12 追記: ここまで **

分かれば単純な話だとは思うのですが…。
どうかご教示のほど、よろしくお願い致します。

Answer 1

リアクティブの部分はVueの基礎になりますので、まずはVueのガイドをしっかり読むことをお勧めします。

リアクティブシステムについてはこの辺りになります。data()と{{ }}によるデータバインディングを使用してください。

データとメソッド

Comments

[Web_akira]

data()と{{ }} を使ってのデータバインディングはできています。

クリックした時に、ある条件であるかを調べ、
そうであればリアクティブに（意図的にメソッドの処理として）計算した値で書き換えたいのですが…。

[devneko64bit]

プログラムの全体を載せてもらった方が分かりやすいかと思います。
配列をv-forで回してそれぞれの値をバインディングしているというような状態であれば、v-forはインデックスも取得できるのでインデックスごとmax_chkに渡してあげれば、リアクティブに更新できると思います。

```
<input v-for="(n, idx) in nums" :value="n" @click="max_chk($event, idx)"/>
```