javascript - Vue $emit in Promise - Stack Overflow

admin管理员组

文章数量:1346283

I am handling an upload for images - based on a Promise. In the "then" - callback I want to $emit an event. I call it 'success'. My VueDevTools shows me an success event, but in the parent ponent the "linked" method is never called. Is it possible that this.$emit('success') does not work within Promises?

Example Code - Child ponent:

UsersAPI.updateAvatar(this.user.id, data, fileExt).then(res => {
  if (res) {
    Helpers.callToast(this, 'is-success', this.$root.$t('profile.avatar_upload'))
    this.$emit('success')
  }
})

Example Code - Parent Component

<Avatar @success="test" :user="user" />

The method "test" in parent ponent is NEVER called, but the event is called in the vue dev tools. If I emit the event before the Promise, I get the result I wish.

Can you may help me? Kind regards

I am handling an upload for images - based on a Promise. In the "then" - callback I want to $emit an event. I call it 'success'. My VueDevTools shows me an success event, but in the parent ponent the "linked" method is never called. Is it possible that this.$emit('success') does not work within Promises?

Example Code - Child ponent:

UsersAPI.updateAvatar(this.user.id, data, fileExt).then(res => {
  if (res) {
    Helpers.callToast(this, 'is-success', this.$root.$t('profile.avatar_upload'))
    this.$emit('success')
  }
})

Example Code - Parent Component

<Avatar @success="test" :user="user" />

The method "test" in parent ponent is NEVER called, but the event is called in the vue dev tools. If I emit the event before the Promise, I get the result I wish.

Can you may help me? Kind regards

• javascript
• vue.js
• promise

Share Improve this question Follow asked Jan 8, 2020 at 1:46 NisNis 18111 gold badge22 silver badges88 bronze badges 3

• Using $emit within a Promise should work fine, so long as you get the this binding correct. It appears to be correct in the code provided and if it were wrong you'd see a console error about $emit not being a function. How are you ascertaining that test isn't being called? I suggest adding some console logging or a debugger statement in the child ponent to check exactly what's going on in there. My current feeling is that the problem does not lie within the code you've posted. – skirtle Commented Jan 8, 2020 at 4:01
• BTW, what is this.$root.$t? there's a typo mistake I think, it should be this.$root.$emit isn't it? – Naren Commented Jan 10, 2021 at 7:43
• Also, can you show us Helpers.callToast what's in here? – Naren Commented Jan 10, 2021 at 7:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

In my case, the child ponent was removed from the parent using "v-if" directive when an API request was initialized.

Then, when my request finished, the child ponent emitted an event correctly, but in this moment the child wasn't rendered in the parent ponent's DOM, so the parent couldn't listen to that event.

I think it was because of the 'this' binding.

You need to bind the this of Vue ponent instance into the callback function.

const callbackFn = function(res) {
  if (res) {
    Helpers.callToast(this, 'is-success', this.$root.$t('profile.avatar_upload'))
    this.$emit('success')
  }
}.bind(this);

UsersAPI.updateAvatar(this.user.id, data, fileExt).then(callbackFn)

or you could simply create a new variable to save your Vue instance, then refer your callback function to use it.

const self = this;
UsersAPI.updateAvatar(this.user.id, data, fileExt).then(res => {
  if (res) {
    Helpers.callToast(this, 'is-success', self.$root.$t('profile.avatar_upload'))
    self.$emit('success')
  }
})

本文标签： javascriptVue emit in PromiseStack Overflow