Estoy creando un montón de componentes dinámicamente y todos estos componentes son iguales (literalmente no hay diferencia entre ellos). Cuando presiono el botón Intro, se crea un nuevo componente y, de hecho, me gustaría encontrar una manera de eliminar uno de estos componentes generados dinámicamente. Los componentes con los que estoy tratando son campos de entrada que tienen un botón en el lado derecho para la función de eliminación. Me esforcé mucho para crear la función de eliminación, pero en realidad no funciona y cada vez que presiono el botón Eliminar, literalmente elimina otro componente. Aquí está la aplicación . Me gustaría eliminar los componentes de forma correcta. Cada botón elimina su entrada relacionada
Aquí está el componente hijo
<template> <div> <div class="dynamiccomponent" @keyup.enter="addNewInput"> <input type="text"> <button @click="deleteInput()">X</button> </div> </div> </template> <script> export default { methods:{ addNewInput(){ this.$emit('newInput') }, deleteInput(){ this.$emit('deleteInput') } } } </script> <style> .dynamiccomponent{ display:flex; margin-top:10px; } button{ background-color:red; } input[type="text"]{ border:none; background-color:#ccc; color:black; } </style>Aquí está el componente principal:
<template> <div class="parent"> <div class="flexbox" v-for="(input,index) in inputs" :key="index"> <DynamicInputs @newInput="addNewInput" @deleteInput=deleteInput(index) /> </div> </div> </template> <script> import DynamicInputs from './components/DynamicInputs.vue' export default { components:{ DynamicInputs, }, data(){ return{ id : 0, inputs : [[DynamicInputs,0]], } }, methods:{ addNewInput(){ this.id=this.id +1 this.inputs.push([DynamicInputs,this.id]) }, deleteInput(index) { console.log(index) this.inputs = this.inputs.filter(input => input[1] !== index) return this.inputs } } } </script>Creo que su problema es que una vez que elimina un elemento que no es el último de la lista, sus índices que configura manualmente están desordenados.
si empiezo con:
const inputs = [ ["a", 0], ["b", 1], ["c", 2] ]y elimino el segundo elemento con el que termino:
const inputs = [ ["a", 0], ["c", 2] ]Los índices que establecí inicialmente ahora ya no son consistentes.
Mi consejo es seguir un enfoque completamente diferente.
Definir una lista de entradas. Por ejemplo, las inputs = ["a", "b", "c"] se utilizarán para representar 3 DynamicInputs. A cada DynamicInput se le pasa una de esas cadenas.
Comunique los cambios a un DynamicInput de regreso al padre. Esto se puede hacer mejor a través de v-model y una propiedad calculada basada en su prop. En la propiedad calculada, define un getter y un setter. En el setter, emite un evento de vuelta al elemento principal, de modo que el cambio de valor se puede realizar en el componente principal.
eliminar mediante empalme. Con el empalme, puede decirle a una matriz dónde (y cuántos) elementos eliminar de la matriz
Así es como puede verse el componente principal
<template> <div class="parent"> <div class="flexbox" v-for="(inputVal, index) in inputs" :key="index"> <DynamicInputs :input-value="inputVal" @change-input="changeInput($event, index)" @new-input="addNewInput" @delete-input="deleteInput(index)" /> </div> </div> </template> <script> import DynamicInputs from "./DynamicInput.vue"; export default { components: { DynamicInputs, }, data() { return { inputs: ["a", "b", "c", "d"], }; }, methods: { changeInput(data, index) { this.inputs[index] = data; }, addNewInput() { this.inputs.push(""); }, deleteInput(index) { this.inputs.splice(index, 1); }, }, }; </script>y así es como el componente DynamicInput
<template> <div> <div class="dynamiccomponent" @keyup.enter="addNewInput"> <input v-model="computedInput" type="text" /> <button @click="deleteInput()">X</button> </div> </div> </template> <script> export default { emit: ["new-input", "delete-input", "change-input"], props: ["input-value"], methods: { addNewInput() { this.$emit("new-input"); }, deleteInput() { this.$emit("delete-input"); }, }, computed: { computedInput: { get: function () { return this.inputValue; }, set: function (newVal) { this.$emit("change-input", newVal); }, }, }, }; </script> <style> .dynamiccomponent { display: flex; margin-top: 10px; } button { background-color: red; } input[type="text"] { border: none; background-color: #ccc; color: black; } </style>