v-for内でフォームのv-bindを別々にする方法は？

お世話になります
下記のコードでinputを独立させて取得したいのですがやり方がわかりません。

html
1<button @click="add">
2<div v-for="n in total">
3  <input v-model="???">
4</div>
5
6<script>
7export default {
8  data() {
9    return {
10      total: 1
11    }
12  },
13  methods: {
14    add() {
15      this.total++
16    }
17  }
18}
19</script>

試した方法

純粋にv-modelに値を入れてみましたがv-forで作成されたフォーム全てに反映されてしまいます。

よろしくお願いいたします

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

回答1件

ベストアンサー

多分こんなかんじ↓ v-forは配列とかじゃないと意味ないよ。なのでtotalをvalsという配列にしといたよ。

html
1<template>
2  <div id="app">
3    <button @click="add">+</button>
4    <div v-for="(n,index) in vals" :key="index">
5      <input v-model="vals[index]">
6    </div>
7    <div>{{vals}}</div>
8  </div>
9</template>
10
11<script>
12export default {
13  data() {
14    return {
15      vals: [""]
16    }
17  },
18  methods: {
19    add() {
20      this.vals.push("");
21    }
22  }
23}
24</script>