Yes, the child component cannot delete itself. The reason is because the original data for rows
is held in the parent component.
If the child component is allowed to delete itself, then there will be a mismatch between rows
data on parent and the DOM view that got rendered.
Here is a simple jsFiddle for reference: https://jsfiddle.net/mani04/4kyzkgLu/
As you can see, there is a parent component that holds the data array, and child component that sends events via $emit
to delete itself. The parent listens for delete event using v-on
as follows:
<row-component
v-for="(row, index) in rows"
:row-data="row"
v-on:delete-row="deleteThisRow(index)">
</row-component>
The index
property provided by v-for
can be used to call the deleteThisRow
method, when the delete-row
event is received from the child component.