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