Stratégies efficaces pour gérer les modèles V dans les champs de saisie dynamiques

Question

J'ai un formulaire qui donne à l'utilisateur la possibilité de cliquer sur un bouton "Ajouter" et de saisir du contenu dans un nouveau champ. J'ai actuellement le modèle v généré dynamiquement pour les champs, mais je me rends compte que je dois enregistrer/retourner chaque champ dans la fonction de configuration afin de les utiliser.

Comment puis-je générer et enregistrer/retourner des modèles virtuels pour différents champs de saisie si je ne sais pas combien de champs l'utilisateur décidera d'ajouter ?

<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

Veuillez jeter un œil à l'extrait de code suivant avec un simple modèle en V dynamique :

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