Error showing when call a function from method in $root.on in Vue-CodePudding

I need to call a method when dropdown value changes. Dropdown is in completely separate component from where i want to call a method. So i am using $root.

Trading.vue

<v-autocomplete
  label="Entity"
  v-model="tradingAs"
  :items="getTradeEntities"
  item-value="id"
  item-text="entity"
  hide-details
  return-object
  @change="tradeChange"
/>

tradeChange(){
  this.$root.$emit('trade_as_event', this.tradingAs.id)
}

New.vue

data: () => ({
  tradeAsAccount: null
}),

mounted: function(){
  this.$root.$on('trade_as_event', function(data) {
    this.tradeAsAccount = data
    console.log(this.tradeAsAccount)
    this.createQuoteConfig() //this line gives error
  })
},

methods: {
  createQuoteConfig() {
    console.log('call api with updated id', this.tradeAsAccount)
  }
}

Error: Vue warn]: Error in event handler for "trade_as_event": "TypeError: this.createQuoteConfig is not a function"

(found in )

CodePudding user response：

this in the anonymous function does not point to instance of current component. Actually it points to the $root.

mounted: function() {
  const root = this.$root
  this.$root.$on('trade_as_event', function(data) {
    console.log(this===root); // true
  })
}

There are two ways to solve the problem.

Option one: Arrow Function

In arrow functions, this retains the value of the enclosing lexical context's this.

this.$root.$on('trade_as_event', (data) => {
  this.tradeAsAccount = data
  console.log(this.tradeAsAccount)
  this.createQuoteConfig()
})

Option two: Vue methods

All methods declared in Vue options will have their this context automatically bound to the Vue instance.

data: () => ({
  tradeAsAccount: null
}),

mounted: function(){
  this.$root.$on('trade_as_event', this.handleTradeAsEvent)
},

methods: {
  handleTradeAsEvent(data) {
    this.tradeAsAccount = data
    console.log(this.tradeAsAccount)
    this.createQuoteConfig()
  },
  createQuoteConfig() {
    console.log('call api with updated id', this.tradeAsAccount)
  }
}