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

user_947416 0
Viewed 44

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?

vue.js javascript
1 Answers

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