Vue.jsで配列の各要素を別々に変更して反映させるには

Vue.js v3.xで、配列の要素をそれぞれHTML上で変更して、Vue.js側のデータでも変更する方法はありますか。
配列にしたいのは、要素数を動的に変更したいためです。

下記のようにやると、input上の要素は変更されますが、Vue.js側のデータが変更されてなれません。

html
1<!DOCTYPE html>
2
3<html>
4
5<head>
6  <title>Deep Numbers</title>
7</head>
8
9<body>
10  <script src="https://unpkg.com/vue@next"></script>
11
12  <div id="app">
13    <ul>
14      <li v-for="number of numbers">
15        <input v-model="number" type="number">
16      </li>
17    </ul>
18
19    <div>{{ numbers }}</div>
20  </div>
21
22  <script>
23    const app = Vue.createApp({
24      data(){
25        return {
26          numbers: [0, 1, 2, 3, 4],
27        }
28      },
29    })
30    app.mount('#app')
31  </script>
32</body>
33
34</html>

これは自分が単に詰まっているだけなので、これをベースにせずに、「自分だったら、こうやれる」という例をみせていただけるとありがたいです。

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

回答1件

ベストアンサー

他にもやりようがありそうですが、changeを利用する方法はいかがでしょうか？

html
1<!DOCTYPE html>
2
3<html>
4
5<head>
6  <title>Deep Numbers</title>
7</head>
8
9<body>
10  <script src="https://unpkg.com/vue@next"></script>
11
12  <div id="app">
13    <ul>
14      <li v-for="(number, index) of numbers"> // indexを取得
15        <input v-model="number" type="number" @change="onChage(number, index)"> //changeを追加
16      </li>
17    </ul>
18
19    <div>{{ numbers }}</div>
20  </div>
21
22  <script>
23    const app = Vue.createApp({
24      data(){
25        return {
26          numbers: [0, 1, 2, 3, 4],
27        }
28      },
29      methods: { // 追加
30        onChage: function(value, index) { // 変更時に呼ぶ関数
31          this.numbers[index] = Number(value); // indexで配列の要素を指定してvalueに書き換え *inputから取得した情報だと文字列なのでNumberで型変換しています。
32        }
33      }
34    })
35    app.mount('#app')
36  </script>
37</body>
38
39</html>