Vue.jsで配列から展開した要素が双方向データバインディングできません

やりたいこと

Vue.js素人です。

Vue.jsは既に読み込んでいて、v-modelディレクティブを使った単純な双方向データバインディングは出来るんですが、
配列からv-forディレクティブで展開してHTMLのレンジ入力欄(スライダー)input type="range"で値を変えたいと思っています。

javascript
1const vm = new Vue({
2    el: "#app",
3    data: {a : [12,23,32]},
4});

HTML
1<div id="app">
2<div v-for="num in a">
3		{{num}}<br>
4		<input type="text" v-model="num"><br>
5		<input type="range" v-model="num">
6	</div>
7</div>
8

画面が最初に表示した時点では、それぞれのフォームや{{num}}に数字は入るのですが、
スライダーをいじったり、テキストフォームの数字を変更しても双方向データバインディングができません。

どうすればいいでしょうか？
何卒ご教示よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

Vue.js では、配列の変更を検知してくれる変更方法が決まっています。
配列内の要素を再代入するような形で変更しても、Vue側で変更を検知してくれません。
詳しくは公式ドキュメント - 配列の変化を検出を確認してください。

で、じゃあどうすりゃいいのっていうとたぶんいくつか方法はありますが、こうしてみたらどうでしょうか。

html
1<div id="app">
2  <div v-for="(num, index) in a">
3    {{num}}<br>
4    <input type="text" :value="num" @input="changeValue(index, $event)"><br>
5    <input type="range" :value="num" @input="changeValue(index, $event)">
6  </div>
7</div>

js
1const vm = new Vue({
2  el: "#app",
3  data: {a : [12,23,32]},
4  methods: {
5    changeValue(index, e) {
6      this.a.splice(index, 1, e.target.value);
7    }
8  }
9});

v-forではループする要素だけでなくindexを受け取ることもできます。
このindexを利用します。

v-for内のinput要素にはvalue属性に値を与えてあげて、変更検知はinputイベントによって自前で行います。
inputイベントが発火したらchangeValueメソッドに自身のindexとDOMイベントオブジェクト($event)を渡します。
changeValueメソッドの中で、a配列をspliceメソッドを使うことで置き換えてVueに変更を検知させます。
変更を検知したVueがv-forを再度レンダリングしなおしてくれるので画面上の値が更新されます。