Vue 学习随笔系列十 -- 编辑弹窗关闭影响父组件数据问题

编辑弹窗关闭影响父组件数据问题

前言

此方法仅适用于后端数据为 JSON 格式

一、原因

编辑弹窗使用 v-model 双向数据绑定，当数据发生变化时，页面数据也会产生变化

二、解决办法

1.参考代码

<el-table-column
        label="操作"
        fixed="right"
        align="center"
        width="160"
      >
        <template slot-scope="scope">
          <span
            type="primary"
            size="mini"
            class="operate-btn"
            plain
            @click="detail(scope.$index, scope.row),modify = true"
          >编 辑</span>
<el-table-column>

...

methods: {
	detail(index, row){
		row = JSON.parse(JSON.stringify(row));
		this.$emit('detail', row)
	}
}