vue生成された入力ボックスバインディングおよび変更値の例を巡回しました。

vueが生成された入力ボックスを巡回してその値の修正と保存を行うのは、vueプロジェクトの開発過程における通常の操作である。この動作の難点は、生成数の不確定さにあり、コンポーネント内のdataを直接定義することができないことである。
考え方
生成された入力枠の数を取得します。
初期化配列、配列の長さは、バインディングされている入力ボックスの数と一致します。
各入力ボックスのv-modelを配列の特定項目と結合します。
コードを実現
1.dataでmodel値を格納する空配列を定義します。

data() {
  return {
    inputData :[]
  }
}

2.取得した配列を遍歴し、取得した値を空の配列に挿入します。

res.data.rows.map(v. => {
      this.inputData.push(v.desc)
    })

3.templateテンプレートコードの入力ボックスにインデックスバインディング配列の特定項目を通す

<el-input
    v-model="inputData[index]"
    placeholder="     "
    clearable
    size="small"
/>

以上のvueは生成された入力枠のバインディングと修正値の例を通して、小編集が皆さんに提供した内容の全部を共有しています。皆様に参考にしていただければと思います。どうぞよろしくお願いします。