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

梅子酱~

于 2024-02-22 14:52:58 发布

阅读量430

点赞数 2

文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/mm_0123456789/article/details/131560504

版权

文章讨论了在Vue应用中，如何避免编辑弹窗操作导致父组件数据意外更新的问题，通过将数据转换为JSON并深拷贝来确保数据独立性。作者提供了一个示例方法，涉及`v-model`和后端JSON数据的处理。

摘要由CSDN通过智能技术生成

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

前言

此方法仅适用于后端数据为 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)
	}
}