在动态输入字段中管理 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 }}