在 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); returns undefined

现在，我简化，然后写：

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

和console.log(this.championship);继续返回undefined

我的代码有什么问题？？？

Answer 1

this 不再在 drop 事件函数中引用 Vue 实例。尝试在 $nextTick 调用之前在 mounted 函数中设置对 this 的引用：

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

在 VueJS 中检索计算的属性

retrieve a computed property in VueJS

vue.js

computed-properties

在 VueJS 中检索计算的 属性

retrieve a computed property in VueJS

vue.js

computed-properties

在 VueJS 中检索计算的属性