Vue $ выбросить в Promise

Question

Я занимаюсь загрузкой изображений на основе обещания. В «тогда» - обратном вызове я хочу $ emit событие. Я называю это «успехом». Мой VueDevTools показывает мне событие успеха, но в родительском компоненте «связанный» метод никогда не вызывается. Возможно ли, что этот. $ Emit ('success') не работает в Promises?

Пример кода - дочерний компонент:

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

Пример кода - родительский компонент

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

Метод "test" в родительском компоненте НИКОГДА не вызывается, но событие вызывается в инструментах vue dev. Если я отправлю событие перед Обещанием, я получу результат, который я получу sh.

Можете ли вы мне помочь? С уважением

Answer 1

Я думаю, что это связано с привязкой 'this'.

Вам необходимо связать экземпляр компонента this из Vue в функцию обратного вызова.

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)

или Вы можете просто создать новую переменную для сохранения экземпляра Vue, а затем обратиться к функции обратного вызова, чтобы использовать ее.

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