Comment ajouter/supprimer dynamiquement des champs d'emplacement basés sur des tableaux dans Vue JS

Question

J'ai le code suivant qui accepte qu'un emplacement contenant un champ HTML soit répété :

<div v-for="(ligne, index) en lignes" :key="index">
      <div class="d-flex justifier-contenu-entre ">
        <nom de l'emplacement="champs">
        </emplacement>
        <input v-model="row.value" />
        <bouton @click="removeRow(index)" type="bouton"class="btn btn-ondes primaires-effet vagues-ondes flottantes-hauteur de la lumière-10-par "
          Supprimer <i class="fa fa-times-circle"></i>
        </bouton>
      </div>
    </div>

Lorsque j'utilise removeRow(index), cela supprime toujours le dernier emplacement. J'ai testé en utilisant et l'entrée correcte a été supprimée ici, mais l'emplacement correct n'a jamais été supprimé.

Je n'ai pas besoin que l'entrée dans l'emplacement soit dynamique ou interagisse avec Vue, je veux juste permettre à l'utilisateur d'ajouter/supprimer dynamiquement des lignes via le composant Vue.

Veuillez jeter un œil aux deux méthodes que j'utilise pour ajouter/supprimer des lignes ci-dessous, au cas où tel serait le problème :

removeRow(index){
      this.rows.splice(index, 1);
    },
    ajouter une rangée(){
      this.rows.push({valeur : 'test'})
    }
Toute aide est grandement appréciée. 
            

Answer 1

Valeur pour votre v-for 循环元素添加一个独特的 key :

<div-for="(row, index) in rows" :key="JSON.stringify(row)">

Cela garantit que les éléments sont correctement supprimés du DOM.