Cara menambah/mengalih keluar medan slot secara dinamik berdasarkan tatasusunan dalam Vue JS

Question

Saya mempunyai kod berikut yang menerima slot yang mengandungi medan HTML untuk diulang:

<div v-for="(baris, indeks) dalam baris"
      <div class="d-flex justify-content-antara ">
        <nama slot="medan">
        </slot>
        <input v-model="row.value"
        <butang @klik="removeRow(index)"type="button"class="btn-gelombang-kesan gelombang-gelombang-ketinggian-cahaya-10-per "
          Alih keluar <i class="fa fa-times-circle"></i>
        </butang>
      </div>
    </div>

Apabila saya menggunakan removeRow(index), ia sentiasa mengalih keluar slot terakhir. Saya telah menguji menggunakan dan input yang betul telah dialih keluar di sini, tetapi slot yang betul tidak pernah dialih keluar.

Saya tidak memerlukan input dalam slot untuk menjadi dinamik atau berinteraksi dengan Vue, saya hanya mahu membenarkan pengguna menambah/mengalih keluar baris secara dinamik melalui komponen Vue.

Sila lihat dua kaedah yang saya gunakan untuk menambah/mengalih keluar baris di bawah, sekiranya ini adalah masalah:

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

Sebarang bantuan amat dihargai.

Answer 1

Nilai untuk v-for 循环元素添加一个独特的 key anda:

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

Ini memastikan elemen dialih keluar dengan betul daripada DOM.