CODEWITHSUNDEEP
javascriptvue.js
msqar
msqar

Reputation: 3040

Getting undefined on this.$refs.xx or this.$el on a rendered component in vue

I don't understand what's going on, it should be pretty simple but for some reason I'm getting undefined on a property that when I debug it, I can see it's there, is not undefined. The component has mounted, the function is being used within mounted and everything should be there and working. But Vue keeps saying it's undefined.

This is the template:

<template>
    <div class="AnimatedCounter">
        <span ref="counterText" class="AnimatedCounter-text">{{ count }}</span>
    </div>
</template>

mounted() {
    this.setCount(this.counter);
},
methods: {
    setCount: (val) => {
        /* $refs props and $el is "undefined" at runtime */
        const obj = this.$refs.counterText;

        anime({
            targets: this.$el,
            n: val,
            round: 1,
            duration: 500,
            easing: "linear",
            update: () => {
                this.count = obj.n;
            }
        });
    }
}

No matter what I do, keeps doing the same. What am I missing?

Upvotes: 2

Views: 486

Answers (1)

Seblor
Seblor

Reputation: 7146

The issue is from the way you wrote your function.

You used an arrow function, which does not bind the this keyword to the Vue component. It most likely references the Window

You need to use the function keyword to declare your function like so:

mounted() {
    this.setCount(this.counter);
},
methods: {
    setCount: function (val) {
        const obj = this.$refs.counterText;

        anime({
            targets: this.$el,
            n: val,
            round: 1,
            duration: 500,
            easing: "linear",
            update: () => {
                this.count = obj.n;
            }
        });
    }
}

Upvotes: 5

Related Questions