1

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.

2 respuestas 2

2

Después de mucho jugar con el código, llegué a una solución, pero para ser sincero y teniendo en cuenta todo el refactoring que hice del código, no podría decir exactamente por qué no funciona el tuyo. Tengo varias ideas, pero de ninguna estoy 100% seguro.

Lo que hice fue utilizar una forma más clásica de definir el componente y generar "id" en vez de componentes enteros e "insertarlos". Claramente el problema que tienes es que no está tomando los indices correctos, bien sea por la forma como se pasan las variables y como se utilizan en el componente, o bien porque se está perdiendo el índice al momento de utilizar :is, el cual reacomoda todo de forma dinámica, o alguna otra razón que realmente desconozco.

Vue.component('my-input', {
  props: ["form"],
  template: `
    <div>
        <input type="text" :placeholder="form.id">
        <button v-on:click="$emit('removeitem')">Remove {{ form.index }}</button>
        <br><br>
    </div>
  `,
  data: function() {
    return {

    }    
  },
})

let vm = new Vue({
el: '#app',
data: {
    counter: 0,
    forms: [],
},

methods: {
    addItem: function() {
        this.forms.push({id: this.counter})
        this.counter += 1
    },
    removeItem: function(index) {
        this.forms.splice(index, 1)
        this.counter -= 1
    }
}

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
    <button v-on:click="addItem">ADD ITEM</button>
    <br><br>

    <my-input v-for="(form, index) in forms" :key="form.counter" :form="form" @removeitem="removeItem(index)"></my-input>

</div>

1
  • Basándome en tu respuesta y después de más pruebas, al parecer tienes razón sobre el :is. Es ahí donde se estaban perdiendo los índices. También me basé en lo que dices de generar "id" y no insertar componentes de forma directa y llegué por mi cuenta a otra alternativa que también funciona. Muchas gracias. Commented el 17 mar. 2018 a las 15:20
0

después de varias pruebas, investigación en la documentación y basarme en una respuesta anterior, llegué a una solución (Ya dije que soy novato en Vue).

Agregué un segundo botón que agrega un segundo componente para poder visualizar mejor las pruebas. Saqué el botón remover de los templates y lo coloqué directamente dentro del v-for, pasándole la función remover que toma al item como argumento.

HTML:

<div id="app">
    <button v-on:click="addItem">ADD ITEM 1</button>
    <button v-on:click="addItemTwo">ADD ITEM 2</button>
    <br><br>

    <div v-for="(item, index) in forms">
        <component :is="item" :number="index"></component>
        <button v-on:click="remove(item)">X</button>
        <br><br>
    </div>
</div>

En Vue lo que hice fue registrar los componentes en mi instancia principal y luego en cada función que agrega componentes definir una variable "componente", dicha variable toma el valor del componente registrado y luego es agregada a mi array.

VUE:

let firstItems = {
props: ["number"],
template: `
    <div>
        <input type="text" :placeholder="itemId">
        <br><br>
    </div>
`,
data: function() {
    return {
        itemId: this.number + 1 + " primero"
    }    
},

}

let secondItems = {
props: ["number"],
template: `
    <div>
        <input type="text" :placeholder="itemId">
        <br><br>
    </div>
`,
data: function() {
    return {
        itemId: this.number + 1 + " segundo"
    }
}

}

let vm = new Vue({
el: '#app',
data: {
    forms: [],
},

methods: {
    addItem: function() {
        let component = 'itemOne'
        this.forms.push(component)
    },

    addItemTwo: function() {
        let component = 'itemTwo'
        this.forms.push(component)
    },

    remove: function(item) {
        let index = this.forms.indexOf(item)
        this.forms.splice(index, 1)
    }
},

components: {
    itemOne: firstItems,
    itemTwo: secondItems,
}

})

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.