[Vuejs]-How to make Vuejs watcher react to the watched variable change in a sibling?

0๐Ÿ‘

I see two possible ways you can make this work.

First one is to use a state management library like Pinia or Vuex. That would allow you to create global states that can be accessed/changed/watched by any of the 3 components you mentioned, regardless of their hierarchy.

Second option would be to make your parent component (Search.vue) responsible for managing all the data flow and turn your children components into dummy ones โ€” i.e. they would just receive props from their parents with all the data they need, and emit events to their parents when something important happens. Thus, the child2 (Post.vue) component would emit an event like this.$emit('submitButtonClicked') to the parent. The parent would react to the event by loadin any data needed (calling an API in your case I assume) and provide the data as a prop to child1 (List.vue).

Leave a comment