How to dynamically add/remove slot fields based on arrays in Vue JS

Question

I have the following code, which accepts a slot containing an HTML field to be repeated:

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

When I use removeRow(index), it always removes the last slot. I've tested using and the correct input was removed here, but the correct slot was never removed.

I don't need the input in the slot to be dynamic or interact with Vue, I just want to allow the user to dynamically add/remove rows via the Vue component.

Please take a look at the two methods I use to add/remove rows below, in case this is the problem:

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

Any help is greatly appreciated.

Answer 1

Add a unique key value to your v-for loop element:

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

This ensures that elements are correctly removed from the DOM.