Tengo lo siguiente, que ocupa una ranura que contiene los campos HTML que se repetirán:

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

Cuando uso removeRow(index) , siempre elimina la última ranura. He probado usando el <input v-model="row.value"> y la entrada correcta se elimina aquí, pero nunca la ranura correcta.

No necesito que las entradas en la ranura sean dinámicas o interactúen con Vue, simplemente quiero permitir que el usuario agregue nuevas filas o elimine filas dinámicamente a través de un componente de Vue.

Consulte los siguientes dos métodos que he usado para agregar/eliminar filas, en caso de que haya un problema aquí:

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

Cualquier ayuda sería realmente apreciada.