Vue.js活动巴士

Question

I'm working on a vue single page project,and I use an empty Vue instance as a central event bus.But there is some problem when firing a 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;
     });
}

in b.vue file,I can recieve data,but I can't assign the value of data to 'this.contract.contractSubject'

Answer 1

I would comment, but point restrictions. It seems like you're only posting snippets of the code, so it's hard to get a full picture. I assume that you've already set this.contract to be an Object? I don't know what your data function looks like, and an error message would be helpful, but it sounds like you're trying to assign a field on an object that doesn't exist yet.

Edit

Thanks for the information. I'm not sure if your edit to b.vue was a mistake when you copied things over to stackoverflow, but based on the code you've provided, my guess is that you wrote data() in the wrong place. You have it inside mounted() , not as a key value of the component object, and thus this.contract won't access it.

I managed to get it working under the setup below

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;
    });
  }
}

More information