retrieve a computed property in VueJS

Question

I use Vue-Dragula to drap and drop. When I drop, it triggers the method:

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

}

Now this.championship is a computed property:

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

where championships and championship_id are global datas.

and console.log(this.championship); returns undefined

Now, I simplify, and I write:

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

and console.log(this.championship); keep returning undefined

What is wrong with my code???

stackoverflow.com/documentation/vue.js/9350/…

Bert
– Bert

2017-03-16 17:17:27 +00:00
Commented Mar 16, 2017 at 17:17 — Bert
– Bert, Commented Mar 16, 2017 at 17:17

CD.. · Accepted Answer · 2017-03-16 17:09:49Z

3

Use arrow functions so your this will be the actual Vue instance:

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

answered Mar 16, 2017 at 17:09

CD..

74.3k25 gold badges160 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

thanksd · Accepted Answer · 2017-03-16 17:09:17Z

2

this isn't referring to the Vue instance anymore in the drop event function. Try setting a reference to this in the mounted function before the $nextTick call:

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

answered Mar 16, 2017 at 17:09

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Collectives™ on Stack Overflow

retrieve a computed property in VueJS

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related