The communication hub in a Vue.js application

Question

The communication hub in a Vue.js application

I'm currently developing a Vue single-page project and I have implemented an empty Vue instance as a central event bus. However, I've encountered an issue when trying to fire an event.

eventbus.js

import vue from 'Vue'
export default new vue({})

a.vue

import bus from '~js/eventBus'
methods: {
    go(name) {
        bus.$emit('setPartner', name);
            this.$router.go(-1);
    }
}

b.vue

import bus from '~js/eventBus'
data() {
         return {
           contract: {
               contractSubject: ''
           }
         }
     },
mounted(){

     bus.$once('setPartner', data => {
          this.contract.contractSubject = data;
     });
}

While working on b.vue file, I am able to receive data but facing issues in assigning the value of data to 'this.contract.contractSubject'.

javascript vue.js event-bus

Answer 1

Answer №1

Due to restrictions on points, I am unable to comment directly. It appears that you are sharing only bits of code rather than the full context. Have you properly set this.contract as an Object? Without knowing specifics about your data function or any error messages, it seems like you might be trying to assign a value to a field within an object that has not been created yet.

Edit

Thank you for the clarification. It is possible that there was an error in b.vue when you transferred the code onto Stackoverflow. From the provided code, my assumption is that you incorrectly placed data(). Placing it inside mounted() instead of as a key value of the component object may result in this.contract being inaccessible.

I have successfully implemented the following solution:

a.vue

import bus from './bus.js';

export default {
  name: 'sitea',
  methods: {
    go(name) {
      bus.$emit('setPartner', name);
    }
  }
}

b.vue

import bus from './bus.js'

export default {
  name: 'siteb',
  data() {
    return {
      contract: {
        contractSubject: ''
      }
    }
  },
  mounted() {
    bus.$once('setPartner', data => {
      console.log(data);
      this.contract.contractSubject = data;
    });
  }
}

Further details

Answer 2

Due to restrictions on points, I am unable to comment directly. It appears that you are sharing only bits of code rather than the full context. Have you properly set this.contract as an Object? Without knowing specifics about your data function or any error messages, it seems like you might be trying to assign a value to a field within an object that has not been created yet.

Edit

Thank you for the clarification. It is possible that there was an error in b.vue when you transferred the code onto Stackoverflow. From the provided code, my assumption is that you incorrectly placed data(). Placing it inside mounted() instead of as a key value of the component object may result in this.contract being inaccessible.

I have successfully implemented the following solution:

a.vue

import bus from './bus.js';

export default {
  name: 'sitea',
  methods: {
    go(name) {
      bus.$emit('setPartner', name);
    }
  }
}

b.vue

import bus from './bus.js'

export default {
  name: 'siteb',
  data() {
    return {
      contract: {
        contractSubject: ''
      }
    }
  },
  mounted() {
    bus.$once('setPartner', data => {
      console.log(data);
      this.contract.contractSubject = data;
    });
  }
}

Further details

The communication hub in a Vue.js application

Answer №1

Similar questions

Gather numerical values and transform them into dates using AngularJS

Checking the content of a textfield in React Material UI based on the user input

The issue of Select2 with AJAX getting hidden behind a modal is causing

Build a nested block containing a div, link, and image using jQuery or vanilla JavaScript

Obtain a Compilation of Video Sources in an HTML5 Format

Tips for emphasizing a cube face when it is hovered over in THREE.js

IE11 encounters an error labeled SCRIPT1010, signaling an expected Identifier when compiled

Can you tell me the distinction between using RemoteWebDriver's executeScript() and Selenium's getEval() for executing

Adding and removing dynamic fields with Bootstrap functionality

Combining element.scrollIntoView and scroll listener for smooth scrolling by using JavaScript

jQuery AJAX Triggered Only Once in Callback Function

Issues with Angular2 causing function to not run as expected

Synchronization issue between VueJS, Firebase Auth, and Route Guards leading to race conditions

Is p-queue designed to utilize multiple threads?

Is it a usual technique to retrieve dynamic content using PhoneGap?

The Laravel Echo feature appears to be unresponsive and not actively monitoring

Jquery Click function malfunctioning on testing environment

What is the best way to choose the initial element in every group using jQuery?

FadeOut Television static on Canvas after a period of inactivity

Sinon experiences delays during an AJAX call