Effiziente Strategien zur Verwaltung von V-Modellen in dynamischen Eingabefeldern

Question

Ich habe ein Formular, das dem Benutzer die Möglichkeit gibt, auf die Schaltfläche „Hinzufügen“ zu klicken und Inhalte in ein neues Feld einzugeben. Ich habe derzeit das V-Modell dynamisch für die Felder generiert, mir ist jedoch klar, dass ich jedes Feld in der Setup-Funktion registrieren/zurückgeben muss, um sie verwenden zu können.

Wie kann ich V-Modelle für verschiedene Eingabefelder generieren und registrieren/zurückgeben, wenn ich nicht weiß, wie viele Felder der Benutzer hinzufügen möchte?

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

  add
  

    
Content {{ i }}