【vue组件重新渲染】解决组件data赋值之后无法更新数据问题

问题描述

组件中data赋值之后无法更新数据问题

---

解决方案：

触发渲染：
this.renderComponent = false;
this.$nextTick(() => {
this.renderComponent = true;
});

原始：

<div v-if="renderComponent">
      <mix-table
        ref="DetailTable"
        :is-paging="true"
        :dynamic-table-cols="tableCols"
        :table-height="tableHeight"
        :query-params="tableDataInfo"
        @rowClick="getRow"
 />
</div>
    
method(){
	//更改值操作
	const list = [...this.tableCols];
	      list[2] = {
	        ...this.tableCols[2],
	        label:’aaa’,
	      };
	      this.tableCols = [...list];
	
	//触发渲染
	this.renderComponent = false; 
	this.$nextTick(() => {
	  this.renderComponent = true;
	});

}