VUE数据的重新渲染

VUE数据的重新渲染

在一个复杂的数据结构中：list[{list2:[]},{list2:[]},…]，修改list2中的某一个值后，进行了处理后，但处理后的值不重新渲染。但通过控制台的打印，看到的数据是处理后的，因此也就明白数据是没有重新渲染出来，然后就进行了各种调试，现总结如下：

1、通过重新加载整个list进行渲染（结果：失败）

var list = [...this.list];

this.list = [];

this.$nextTick(() => {

	this.list = [...list];

});

2、通过vue资料中的数据修改的方式：$set，进行值的修改（结果：失败）

this.$set(this.list[rowIndex], 'list2',row.list2);

3、然后又用了强制渲染（结果：失败）

this.$forceUpdate();

4、最后通过另一个的解决办法解决了这个问题：用v-if进行渲染。当v-if内的条件为false时，组件就会结束渲染，然后再让它为True，就可以重新加载了，但是要注意，不能直接将变量改为false后立即改为true，需要在下一个事件循环“tick”后再修改，因为dom异步更新要在下一个“tick”更新。（参考链接：https://blog.csdn.net/DDghsot/article/details/93479029）

<el-table v-if="showL"></el-table>

处理的方法中这样处理一下：

this.showL =false;

this.$nextTick(() => {

 this.showL =true;

});