Vue解决双向绑定引起数据同步变化的问题

起因是创建Modal编辑Table中的某个条目,Modal的数据直接引用对应TableData索引处的值,当我在Modal中修改数据时,神奇的是Table里的数据也跟着变了,关键是Modal关闭了之后,Table的数据也不会恢复(除非刷新),一想大概是双向绑定引起的问题

原先的写法很简单:

click: () => {  
  this.modalObject = this.tableData[params.index];  
  this.modalDisplay = true;
}

解决办法就是用JSON.parse/stringify兜一圈,生成临时变量干掉双向绑定:

click: () => {  
  this.modalObject = JSON.parse(JSON.stringify(this.tableData[params.index]));  
  this.modalDisplay = true;
}

你可能感兴趣的:(Vue解决双向绑定引起数据同步变化的问题)