Q&A
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件
0
ベストアンサー
他にもやりようがありそうですが、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>
ご参考になれば幸いです。
投稿2021/02/08 01:04
総合スコア354
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。