splice() wrong component in data array

Question

Let's say I have a form, and can add or remove a column by a click.

I use v-for to render the vue components, when I try to use splice() to delete a specific component, it always delete the last component in the array.

I can't figure out what I did wrong here, any hint will be very appreciated.

Here is a part of my code: the problem is occured at removePerson method.

Parent Component

<template>
<div class="form-container">
    <template>
        <div v-for="(child, key) in otherPersonArray" :key="key" class="form-container">
            <button @click="removePerson(key)" class="close">X</button>
            <component :is="child"></component>
        </div>
    </template>
    <button @click="addPerson" >+ Add Person</button>
</div>
</template>

<script>
import otherPerson from './OtherPerson';

export default {
    components: {
        otherPerson
    },
    data() {
        return {
            otherPersonArray: [],
        }
    },
    methods: {
        addPerson() {
            if (this.otherPersonArray.length <= 10) {
                this.otherPersonArray.push(otherPerson);
            }
        },
        removePerson(key) {
            this.otherPersonArray.splice(key, 1);
        },
    },
}
</script>

For example, when I try to delete the component which input value is 1, it delete the component which input value is 2.

otherPerson component

<template>
<div class="form-container">
    <div class="person">
        <div class="row">
            <div class="form-group col-6">
                <label for="inventor-last-name">Lastname of Person *</label>
                <div class="input-container">
                    <input v-model="lastName" type="text" class="form-control form-control-lg">
                </div>
            </div>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            lastName: '',
        }
    },
}
</script>

Answer 1

there are couple of ways to achieve this but for now can you try these:

removePerson(key) {
            this.otherPersonArray = this.otherPersonArray.filter(person => {
                 return person.key === key;
             })
        }

OR

const index = this.otherPersonArray.indexOf(ele by key); // get index by key person key
if (index > -1) {
  this.otherPersonArray.splice(index, 1);
}

What I am understanding key is index here then you should follow this:

 var filtered = this.otherPersonArray.filter(function(value, index){ 
    return index !== key;
});

let me know if still it not working for you?

Here is example:

Answer 2

You can use Array.prototype.filter

removePerson(key) { 
  this.otherPerson = this.otherPersonArray.filter((x, i) => i !== key);
}