I'm facing an issue with my code that allows me to add inputs using @click="addInput()". However, I am struggling to delete specific inputs using @click="deleteInput(). When I try to delete an input with this.inputs.splice(index, 1), only the last input gets deleted and I can't figure out why.
Can anyone provide a solution on how to delete a specific input instead of just the last one?
It's important to note that the additional code in my inputs at addInput involves the name property from a child element.
Thank you for your assistance!
Here is a snippet of my template:
<template>
<div >
<div class="mt-2" v-for="(id, index) in inputs" :key="index">
<div class="row mb-3">
<b-button-group class="col-md-12">
<b-button class="col-md-8" v-b-toggle="toggleElementInChildVue" variant="danger"></b-button>
<b-button @click="deleteInput(index)" class="col-md-4" variant="danger">Delete this!</b-button>
</b-button-group>
</div>
</div>
<div>
<b-button @click="addInput()">Add Input</b-button>
</div>
</div>
</template>
And here is my script section:
<script>
export default {
name: 'test',
data() {
return {
inputs: [{
name: "",
}],
}
},
methods: {
deleteInput(index) {
this.inputs.splice(index, 1)
},
addInput() {
this.inputs.push({
name: "",
})
},
},
}
</script>