Custom event fires before emitting

I have a custom event that I emit in the root component, but it fires just after being defined in the main component.

In another component:

created() {
  this.$app.on('completeCartCheckout', this.handleCheckout());
},

beforeDestroy() {
  this.$app.off('completeCartCheckout')
},

methods: {
  handleCheckout() {
    console.log('checking out') // Fires after component is created
  }, 
},

In the app root:

methods: {
  registerUser() {
    // Register user
    this.$app.emit('completeCartCheckout') // Custom event will be fired 
  },
}

Any thing Iā€™m missing?

change to this.handleCheckout (without ())

1 Like