So fügen Sie Slot-Felder basierend auf Arrays in Vue JS dynamisch hinzu/entfernen

Question

Ich habe den folgenden Code, der einen Slot mit einem zu wiederholenden HTML-Feld akzeptiert:

<div v-for="(row, index) in rows" :key="index">
      <div class="d-flex justify-content-between ">
        <slot name="fields">
        </slot>
        <input v-model="row.value"
        <button @click="removeRow(index)" type="button"
          Entfernen Sie <i class="fa fa-times-circle"></i>
        </button>
      </div>
    </div>

Wenn ich removeRow(index) verwende, wird immer der letzte Slot entfernt. Ich habe es mit getestet und die richtige Eingabe wurde hier entfernt, aber der richtige Steckplatz wurde nie entfernt.

Ich brauche nicht, dass die Eingabe im Slot dynamisch ist oder mit Vue interagiert, ich möchte dem Benutzer lediglich ermöglichen, Zeilen über die Vue-Komponente dynamisch hinzuzufügen/zu entfernen.

Bitte schauen Sie sich die beiden Methoden an, die ich unten zum Hinzufügen/Entfernen von Zeilen verwende, falls dies das Problem ist:

removeRow(index){
      this.rows.splice(index, 1);
    },
    Zeile hinzufügen(){
      this.rows.push({value: 'test'})
    }

Jede Hilfe wird sehr geschätzt.

Answer 1

为您的 v-for 循环元素添加一个独特的 key 值：

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

这样可以确保从 DOM 中正确地移除元素。