No entiendo lo que está pasando, debería ser bastante simple, pero por alguna razón me estoy quedando undefined en una propiedad que cuando la depuro, puedo ver que está ahí, no está indefinida. El componente se ha montado, la función se está utilizando dentro de montado y todo debería estar allí y funcionando. Pero Vue sigue diciendo que no está undefined .
Esta es la plantilla:
<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 importa lo que haga, sigue haciendo lo mismo. ¿Qué me estoy perdiendo?
El problema es por la forma en que escribiste tu función.
Usó una función de flecha, que no vincula la palabra clave this al componente Vue. Lo más probable es que haga referencia a la Window .
Debe usar la palabra clave function para declarar su función de esta manera:
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; } }); } }