Cuando solemos escribir código con Vue, debido al mecanismo de monitoreo de Vue, podemos actualizar directamente la página cuando modificamos los datos de la página, pero ocasionalmente habrá situaciones en las que no podamos monitorearlo.
P.ej:
// 获取报表
public async getChannelList() {
this.channelList = await getChannels();
this.channelList.forEach(item => {
item.isSelected = false
})
}
Aquí tenemos que obtener el channelList y luego darle a cada elemento un atributo isSelected. Sin embargo, en el proceso de uso, los datos se actualizaron pero la página no responde.
Como se muestra en la figura, cambié el isSelected de los segundos datos a verdadero, pero la visualización de la página sigue siendo falsa.
Al principio pensé que se debía a la página de datos asincrónicos, así que usé nextTick y $ set para el enlace de datos, pero aún así no pudo resolverlo.
————————————————————————————————
la razón
Vue recorrerá nuestros datos en profundidad cuando se inicialice (el contenido que a menudo se memoriza en las entrevistas no se repetirá) Cuando asignamos valores a los datos de la página en el primer paso, de hecho, Vue ya ha realizado el seguimiento de varios atributos , lo que nos lleva a nuestro segundo Cuando necesita agregar un atributo a los datos de la página, vue no monitorea el atributo isSelected.
Solución
1. Si se trata de datos de inicialización de página, escriba todos los atributos iniciales y deje que Vue supervise todos los atributos
2
public async getChannelList() {
let data:any = await getChannels();
data.forEach(item => {
item.isSelected = false
});
this.channelList = JSON.parse(JSON.stringify(data))
}
Primero, use un dato vacío para capturar los datos que sacamos, luego manipule estos datos para crear nuevamente otros atributos que necesitemos, y finalmente copie en profundidad la asignación única al objeto de matriz representado en la página real.
para resumir
El código no está estandarizado y quedan dos líneas de cabello.