How to change parent component from nested child component?

Question

The situation is like this. There is an array of object called tableData storing table rows, which is now stored in vuex

The component structure is like this:

Parent (page) -> child 1 (tableLayout)-> child 2 (tableBody)-> child 3 (row)

In child 3, there is a delete function to remove an index in tableData.

The parent needs to update its data (selectedRow) which will be passed to another unrelated child component if the id of the row deleted is the selectedRow Id.

Currently I am using watch to watch tableData to react to the change in parent component. However, the watch function will always loop over tableData to find if selectedRow still exist whenever tableData is updated, which is quite undesirable when the array is huge.

I thought of using emit but it will have to go through 2 components to reach the parent, making the code hard to manage

I also thought of using bus, but its not a good practice as well.

Can anyone give me any suggestion on this issue?

Answer 1

You can store the selectedRow in vuex then in child3 update selectedRow in your vuex store

Answer 2

Since you have stored the tableData in vuex... you can achieve this using mutation

From your child2 component you can just call a mutation to remove the particular index from tableData

for example

this.$store.commit('removeIndex', payload) // where removeIndex is a mutation handler and payload is the index value sent as argument