Why isn't my watch function functioning properly within Vue?

Question

Why isn't my watch function functioning properly within Vue?

In my JS file, I have two components. The file starts with this line: const EventBus = new Vue();

I am trying to pass two strings, 'username' and 'password', from the first component to the second component, but it's not working. Can you help me identify where I am going wrong?

First Component:


Vue.component('log-reg-modal', {
    data: () => ({
        username: "",
        password: "",
    }),
    watch: {
        username: function(){
            EventBus.$emit('changed_username', this.username);
        },
        password: function(){
            EventBus.$emit('changed_password', this.password);
        },
    }
});

Second Component:


new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: () => ({
        username: "",
        password: "",
    }),
    methods: {
        register : function (event) {
            EventBus.$on('changed_username', this.username);
            EventBus.$on('changed_password', this.password);
        }
    }
});

javascript vue.js vue-component

Answer 1

Answer №1

To effectively handle event communication in Vue, consider utilizing the EventBus.$on method within the created lifecycle hook to subscribe to events.

Alternatively, you can opt for the built-in event handlers provided by Vue instead of using the EventBus.

Implementing Event Bus:

const EventBus = new Vue();

const UserProfileModal = {
  template: `
    <div><input v-model="username" placeholder="Username" />
         <input v-model="password" placeholder="Password" /></div>
  `,
  data: () => ({ username: "", password: "" }),
  watch: {
    username: function() { EventBus.$emit("changed_username", this.username) },
    password: function() { EventBus.$emit("changed_password", this.password) },
  }
};

new Vue({
  el: "#app",
  components: { UserProfileModal },
  data: () => ({ username: "", password: "" }),
  created() {
    EventBus.$on("changed_username", val => this.username = val);
    EventBus.$on("changed_password", val => this.password = val);
  }
});

Using 'built-in' this.$emit(..., ...):

const UserProfileModal = {
  template: `
    <div><input v-model="username" placeholder="Username" />
         <input v-model="password" placeholder="Password" /></div>
  `,
  data: () => ({ username: "", password: "" }),
  watch: {
    username: function() { this.$emit("changed_username", this.username) },
    password: function() { this.$emit("changed_password", this.password) },
  }
};

new Vue({
  el: "#app",
  components: { UserProfileModal },
  data: () => ({ username: "", password: "" }),
  methods: {
    handleUsernameChange(val) { this.username = val },
    handlePasswordChange(val) { this.password = val }
  },
});

Answer 2

To effectively handle event communication in Vue, consider utilizing the EventBus.$on method within the created lifecycle hook to subscribe to events.

Alternatively, you can opt for the built-in event handlers provided by Vue instead of using the EventBus.

Implementing Event Bus:

const EventBus = new Vue();

const UserProfileModal = {
  template: `
    <div><input v-model="username" placeholder="Username" />
         <input v-model="password" placeholder="Password" /></div>
  `,
  data: () => ({ username: "", password: "" }),
  watch: {
    username: function() { EventBus.$emit("changed_username", this.username) },
    password: function() { EventBus.$emit("changed_password", this.password) },
  }
};

new Vue({
  el: "#app",
  components: { UserProfileModal },
  data: () => ({ username: "", password: "" }),
  created() {
    EventBus.$on("changed_username", val => this.username = val);
    EventBus.$on("changed_password", val => this.password = val);
  }
});

Using 'built-in' this.$emit(..., ...):

const UserProfileModal = {
  template: `
    <div><input v-model="username" placeholder="Username" />
         <input v-model="password" placeholder="Password" /></div>
  `,
  data: () => ({ username: "", password: "" }),
  watch: {
    username: function() { this.$emit("changed_username", this.username) },
    password: function() { this.$emit("changed_password", this.password) },
  }
};

new Vue({
  el: "#app",
  components: { UserProfileModal },
  data: () => ({ username: "", password: "" }),
  methods: {
    handleUsernameChange(val) { this.username = val },
    handlePasswordChange(val) { this.password = val }
  },
});

Answer 3

Answer №2

Functions must be used as handlers in EventBus.$on, not properties themselves.
Before using the log-reg-modal component, have you invoked the register method?

Answer 4

Functions must be used as handlers in EventBus.$on, not properties themselves.
Before using the log-reg-modal component, have you invoked the register method?

Answer 5

Answer №3

In Vue's lifecycle, it is recommended to place EventBus.$on methods within the created() function.

created (){
        EventBus.$on('changed_username', (data) => {
            this.username = data;
          });
        EventBus.$on('changed_password', (data) => {
            this.password = data;
          });
}

Answer 6

In Vue's lifecycle, it is recommended to place EventBus.$on methods within the created() function.

created (){
        EventBus.$on('changed_username', (data) => {
            this.username = data;
          });
        EventBus.$on('changed_password', (data) => {
            this.password = data;
          });
}

Why isn't my watch function functioning properly within Vue?

Answer №1

Answer №2

Answer №3

Similar questions

A method of submitting by simply pressing the enter key alongside clicking on a Bootstrap button

Commitments shatter amidst constructing a website

What is the best method for extracting information from this data? (extracting data from

Error: Unable to execute $(...).stellar since it is not a recognized function

What is the process for loading a script file from within a component's HTML?

Guidelines for establishing authentic headers on a SignalR connection

Design my div layout to resemble a tree shape

Jquery spinner overlay for enhanced loading experience

Acquire the jQuery cookie with the power of AngularJS

What is the process for integrating Android Java code with Node.js code?

Having trouble deciphering mathematical formulas while editing content on ckeditor

Having trouble with Selenium WebDriverJS on both FireFox and Internet Explorer

How can VueJS manipulate state with Mutation?

What is the method for designating the specific pages on which the stripejs script should be loaded?

What is the best way to animate my logo using JavaScript so that it scales smoothly just like an image logo

Utilize Vue.js to take screenshots on your device

What could be causing transition to not be recognized as an element in HTML?

Set the value of one email input to another email input in AngularJS

Vue JS sorting elements and reverting back to their original state

Implementing dynamic component rendering and iterating through a list in React JS based on state changes