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

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 >
        <span ref="counterText" >{{ 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?

CodePudding user response：

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