Establishing a data variable observer across components in Vue JS

Question

Establishing a data variable observer across components in Vue JS

I have two modules: module X and module Y. X.js is structured as follows:

export default {
    name: 'X',
    data () {
        var: true
    }
}

The structure of Y.js is as follows:

import X from './X'
export default {
    name: 'Y',
    components: {
        X
    }
}

I aim to access the dynamically changing value of variable var from module X in module Y. To achieve this, I implemented a watcher:

import X from './X'
export default {
    name: 'Y',
    watch: {
        X.data().var: function() {
            console.log('Value of var changed in X.')
        }
    },
    components: {
        X
    }
}

Despite the mentioned method not yielding the desired outcome. Modules X and Y lack a parent-child relationship, thereby restricting the use of props. How can I address this issue?

javascript vue.js watch

Answer 1

Answer №1

If both instances of A and B exist within the same root instance, utilizing that root as an event hub for communication between the two components is possible.

Step 1 | Define the root template that invokes handleAVarChange when necessary:

const rootTemplate = `

    <div class="root">
        <A @var-change="handleAVarChange"></A>
        <B v-bind:AVar="AVar"></B>
    </div>

`;

Step 2 | Implement the Vue root script using rootTemplate:

const root = new Vue({
    template: rootTemplate,
    data() {
        return { AVar: null };
    },
    methods: {

        handleAVarChange(value) {
            this.AVar = value;
        }
    }
});

template: Contains the template with A and B.
data: Returns an object with property AVar, used to store the source variable from A.
methods.handleAVarChange: Serves as an event handler in root.template.

Step 3 | Emit an event named 'var-change' with the new value from A:

export default {
    name: 'A',
    data () {
        return {
            Var: true,
        }
    },

    methods: {
        onSomeEvent(varValue) {
            this.$emit('var-change', varValue);
            // or maybe...
            this.$emit('var-change', this.Var);
        },
    },
}

Step 4 | Ensure that AVar is set as a prop in B:

export default {
    name: 'B',
    props: ['AVar'],
    // ...
}

Answer 2

If both instances of A and B exist within the same root instance, utilizing that root as an event hub for communication between the two components is possible.

Step 1 | Define the root template that invokes handleAVarChange when necessary:

const rootTemplate = `

    <div class="root">
        <A @var-change="handleAVarChange"></A>
        <B v-bind:AVar="AVar"></B>
    </div>

`;

Step 2 | Implement the Vue root script using rootTemplate:

const root = new Vue({
    template: rootTemplate,
    data() {
        return { AVar: null };
    },
    methods: {

        handleAVarChange(value) {
            this.AVar = value;
        }
    }
});

template: Contains the template with A and B.
data: Returns an object with property AVar, used to store the source variable from A.
methods.handleAVarChange: Serves as an event handler in root.template.

Step 3 | Emit an event named 'var-change' with the new value from A:

export default {
    name: 'A',
    data () {
        return {
            Var: true,
        }
    },

    methods: {
        onSomeEvent(varValue) {
            this.$emit('var-change', varValue);
            // or maybe...
            this.$emit('var-change', this.Var);
        },
    },
}

Step 4 | Ensure that AVar is set as a prop in B:

export default {
    name: 'B',
    props: ['AVar'],
    // ...
}

Answer 3

Answer №2

If you're facing a problem, consider utilizing a basic state management solution (Vue docs).

let store = {
  debug: true,
  state: {
      myVariable: false
  },
  updateMyVariable(value) {
    this.state.myVariable = value
  }
}

Make sure to link the store with components X and Y:

data() {
  return {
    sharedStorage: store.state
  }
}

Explore this JSFiddle for hands-on experience.

Answer 4

If you're facing a problem, consider utilizing a basic state management solution (Vue docs).

let store = {
  debug: true,
  state: {
      myVariable: false
  },
  updateMyVariable(value) {
    this.state.myVariable = value
  }
}

Make sure to link the store with components X and Y:

data() {
  return {
    sharedStorage: store.state
  }
}

Explore this JSFiddle for hands-on experience.

Establishing a data variable observer across components in Vue JS

Answer №1

Answer №2

Similar questions

AngularStrap offers a dynamic and responsive navbar collapsing animation feature that enhances user

Clear Dropdown Selections prior to Submitting

How can I pass an Angular parameter to an onclick function?

Learn the step-by-step process of clicking on a button to modify its properties and deactivate it

How can one module in Nuxt mutate the Vuex state of another module?

Guide to transferring a Django text field to an HTML attribute and accessing it with JavaScript

Iterating through objects in an array using JavaScript should only happen after the current object

The error message "Uncaught ReferenceError: $ is not defined" in Laravel 7.x signifies that

Unable to access contextual values in NextJS

Dealing with Memory Issues in Google Apps Scripts

The mysterious nature of view binding in Ember.js

The Scribd page function is experiencing technical difficulties and is currently not functioning as

CSS button pressed

Is there a way to resolve the error message type issue in Quasar Vuelidate?

Newbie's guide to setting up babel for material-ui in Next.js!

Restricting the number of characters allowed for text messages and keeping track of the count

When using $http in AngularJS, an error may occur when it

What's the best way to ensure that the theme state remains persistent when navigating, refreshing, or revisiting a page in the browser?

What causes an undefined symbol in a Linux environment when using a C++ addon in node.js?

How can I create a v-slot template with dynamic content in Vue.js?