Получить вычисленное свойство в VueJS

Question

Я использую Vue-Dragula, чтобы драпировать и опускать. Когда я бросаю, это вызывает метод:

mounted: function () {
    this.$nextTick(function () {
        Vue.vueDragula.eventBus.$on(
            'drop',
            function (args) {
                console.log(this.championship);
            }
        );

}

Сейчас this.championship является вычисляемым свойством:

computed: {
    championship(){
        return this.championships.find((elem) => elem.championship == this.championship_id);
    },
}

где championships а также championship_id глобальные данные.

а также console.log(this.championship); возвращается undefined

Теперь я упрощаю и пишу:

computed: {
    championship(){
        return 2;
    },
}

а также console.log(this.championship); продолжай возвращаться undefined

Что не так с моим кодом???

Answer 1

this больше не ссылается на экземпляр Vue в функции события drop. Попробуйте установить ссылку на this в mounted функционировать до $nextTick вызов:

mounted: function () {
  let vm = this;
  this.$nextTick(function () {
    Vue.vueDragula.eventBus.$on(
      'drop',
      function (args) {
        console.log(vm.championship);
      }
    );
  }
}

Answer 2

Используйте функции стрелок, чтобы ваш this будет фактическим экземпляром Vue:

mounted () {
    this.$nextTick(() => {
        Vue.vueDragula.eventBus.$on(
            'drop',
            args => console.log(this.championship)
        );
    })
}