Soy novato en Vue. He buscado y buscado durante las últimas horas y aun así no logro que esto funcione.
Este es mi código:
HTML:
<div id="app">
<button v-on:click="addItem">ADD ITEM</button>
<br><br>
<template v-for="(input, index) in forms">
<component :is="input" :key="input.id" :item="index"></component>
</template>
</div>
VUE:
let input = {
props: ["item"],
template: `
<div>
<input type="text" :placeholder="itemId">
<button v-on:click="removeItem">Remove</button>
<br><br>
</div>
`,
data: function() {
return {
itemId: this.$parent.counter,
itemIndex: this.item,
}
},
methods: {
removeItem: function() {
this.$parent.forms.splice(this.itemIndex, 1)
this.$parent.counter -= 1
}
}
}
let vm = new Vue({
el: '#app',
data: {
counter: 0,
forms: [],
},
methods: {
addItem: function() {
this.counter += 1
this.forms.push(input)
}
}
})
El botón para agregar item lo hace de forma correcta, el problema está al intentar removerlo. He probado múltiples combinaciones y con todas ellas lo único que consigo es que se elimine el último item de la lista y no el que yo quiero eliminar.