如何在动态输入字段中处理 v-model

Question

我有一个表单，用户可以选择单击“添加”按钮并将内容输入新字段。我目前已经为这些字段动态生成了 v-model，但我意识到我需要在 setup 函数中注册/返回它们中的每一个才能使用它们。

如果我不知道用户将决定添加多少字段，如何为不同的输入字段生成和注册/返回 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-models 看看下面的 sn-p：

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)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <button @click="addInput">add</button>
  <div v-for="(content, i) in contentFields" :key="i">
    <div>Content {{ i }}</div>
      <input
        v-model="content.name"
        outlined
        type="text"
        dense
        @change="setD"
      />
      <input
        v-model="content.desc"
        outlined
        type="text"
        dense
        @change="setD"
      />
  </div>
</div>