Vue JS中如何根據數組動態新增/刪除插槽字段

Question

我有以下程式碼，它接受一個包含要重複的HTML欄位的插槽：

<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" class="btn btn-primary waves-effect waves-float waves-light height-10-per " >
          Remove <i class="fa fa-times-circle"></i>
        </button>
      </div>
    </div>

當我使用removeRow(index)時，它總是移除最後一個插槽。我已經測試了使用，正確的輸入在這裡移除了，但從未移除正確的插槽。

我不需要插槽中的輸入是動態的或與Vue交互，我只是想允許用戶透過Vue組件動態添加/刪除行。

請看我用來新增/刪除行的下面兩種方法，以防問題出在這裡：

removeRow(index){
      this.rows.splice(index, 1);
    },
    addRow(){
      this.rows.push({value: 'test'})
    }

非常感謝任何幫助。

Answer 1

為您的 v-for 迴圈元素新增一個獨特的 key 值：

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

這樣可以確保從 DOM 中正確地移除元素。