Tengo un problema en el que después de 5 segundos, el texto no se actualiza. ¿Puede alguien ayudarme a averiguar qué necesito para que cambie en el navegador después de 5 segundos?
<template> <h1>{{ test }}</h1> </template> <script> export default { data() { return { test: 'Foo' } }, mounted() { setTimeout(function(){ this.test = 'Bar' }, 3000); } } </script>En la función setTimeout, use una función de flecha de la siguiente manera:
setTimeout(() => { this.test = "Bar"; }, 3000);Consulte https://codesandbox.io/s/fervent-glitter-l3j5s?file=/src/App.vue:160-217 para ver un ejemplo.
La razón es que el contexto (esto) es diferente con una función normal y una función de flecha. Consulte la sección https://www.w3schools.com/Js/js_arrow_function.asp "¿Qué pasa con esto?" para más.
La función montada tiene su propio enlace this, y cuando creas otra función anónima, también tiene su propio enlace this, que es diferente del montado.
Te sugiero la forma clásica: mantén una referencia a esto y úsala en la función, esto siempre funcionará.
mounted() { const that = this; setTimeout(function(){ that.test = 'Bar' }, 3000); }Una vez que se haya familiarizado con el alcance y la función de flecha, puede usar la función de flecha para hacer que su código sea más corto y limpio. En realidad, no existe esta función de unión a la flecha, que es un poco difícil de sentir y entender al principio.