在動態輸入欄位中管理 v 模型的有效策略

Question

我有一個表單，使用者可以選擇點擊「新增」按鈕並將內容輸入到新欄位。我目前已經動態生成了字段的 v 模型，但我意識到我需要在設定函數中註冊/返回每個字段才能使用它們。

如果我不知道用戶將決定添加多少個字段，如何為不同的輸入字段生成並註冊/返回 v-model？

<div
    v-for="(content, i) in contentFields"
    :key="i"
>
  <div>Content {{ i }}</div>
        <q-input
          :v-model="`contentName_` + i"
          outlined
          type="text"
          dense
        />
 </div></div>

Answer 1

請看以下有簡單動態 v 模型的程式碼片段：

new Vue({
  el: "#demo",
  data() {
    return {
      contentFields: [{name: '', desc: ''}]
    }
  },
  methods: {
    addInput() {
      let newI = this.contentFields.length
      this.contentFields.push({name: '', desc: ''})
    },
    setD() {
      console.log(this.contentFields)
    }
  }
})

sssccc

  add
  

    
Content {{ i }}