Quiero actualizar el nombre de la persona después de cada segundo en la interfaz de usuario después de obtener el nombre del objeto lifeSpanObj en el archivo .vue (vuejs).
<div> {{personName}}</div> // in template using this this(its example not exactly this) this.lifeSpanObj.forEach((element, i) => { setTimeout(function () { this.personName = element.name; console.log(this.personName); }, 1000); });Usando el ejemplo anterior, puedo imprimir valores actualizados en la consola, pero la interfaz de usuario no se actualiza. ¿Qué podría arreglar esto?
Asegúrese de usar siempre la función de flecha para no sombrear this palabra clave:
this.lifeSpanObj.forEach((element, i) => { setTimeout(() => { // arrow function instead of anonymous function this.personName = element.name; // now this refers to the vue component console.log(this.personName); }, 1000); });para la función primitiva (en ES5) aún puede seguir el siguiente enfoque
this.lifeSpanObj.forEach((element, i) => { var self = this; setTimeout(function () { self.personName = element.name; console.log(self.personName); }, 1000); });