[Vuejs]-Modifying data in one component based on a state of parallel component

by

0👍

If you’re still not familiar with vuex and only building a small app, you can try this https://alligator.io/vuejs/global-event-bus/ . But if you’re building a large app, just use vuex.

0👍

Vuex and global event bus are for situations you want to share data between really distant components, here it’s just one parent, two children, so you can pass props down, and propagate child changed data with events, the template should look like something like this:

<div id="main">
  <data-component v-bind:array="filteredArr"/>
  <filters-component v-on:change="filterChanged"/>
</div>

For the script part, in filters-component, you propagate the change event with the new filter condition, like this.$emit('change', 'new condition');. And in the parent you have filterChanged in your methods to handle the new condition and change the array for data-component.

Leave a comment