vue.js - Eliminar un componente hijo de Vue

Question

Estoy realmente atascado en este. He creado un componente Vue (2.0) que está compuesto por componentes secundarios, todo está siendo empaquetado en la Web, etc. Por ejemplo, este es el padre:

<div>

    <h1>This is just a title for lulz</h1>

    <rowcomponent v-for="row in rows" :row-data="row"></rowcomponent>

</div>

que tiene una hilera de rows que se ve así:

rows: [{ sometext: "Foo"} , { sometext: "Bar" }]

Entonces mi componente de fila se ve así:

<div>{{ this.sometext }} <button @click="deleteRow">Delete Row</button></div>

Y siento que debería ser realmente fácil establecer un método en el rowcomponent que sea algo como esto:

deleteRow() {
    this.delete();
}

¿Necesito $ emitir algo al padre con el índice de la fila para eliminarlo? Me esta volviendo loco. Todos los ejemplos parecen sugerir que sería fácil hacerlo, pero no en el caso de que tenga componentes secundarios que quieran eliminarse.

Answer 1

Sí, el componente hijo no puede borrarse a sí mismo. La razón es porque los datos originales de las rows se mantienen en el componente principal.

Si se permite que el componente secundario se elimine a sí mismo, habrá una falta de coincidencia entre los datos de las rows en el primario y la vista DOM que se procesó.

Aquí hay un simple jsFiddle para referencia: https://jsfiddle.net/mani04/4kyzkgLu/

Como puede ver, hay un componente primario que contiene la matriz de datos y un componente secundario que envía eventos a través de $emit para eliminarse. El padre escucha el evento de eliminación usando v-on siguiente manera:

<row-component
    v-for="(row, index) in rows"
    :row-data="row"
    v-on:delete-row="deleteThisRow(index)">
</row-component>

La propiedad de index proporcionada por v-for se puede usar para llamar al método deleteThisRow , cuando se recibe el evento delete-row del componente secundario.