关于vue中 编辑时使用 v-model时一个bug

关于vue中 编辑时使用 v-model的一个bug;

缘由: 在前端更换了vue3 +element 框架后,暴露很多问题,比如在编辑页面时就遇到 v-model时,修改数据主页面也跟着一起被修改了,在当需要校验时,就会存在校验失败了,页面存在假修改 的为问题;

如图

这样就存在加修改的情况,刷新后数据重新刷回;

这里面主要是用一个新的值接收输入值,并在并传回,这样还是不行,这样需要在传回对象体前给对象赋值,这样还是回在这里对主页面进行修改;

两个解决方法

1. 下面的代码方式;

2. 后台重新写一个更新代码,接收你页面上修改字段,使用id查询出来,修改;成功后,把新值付给对象

现在上代码

  ​
  <template>
      <el-dialog title="编辑数据源" v-model="editVisible" width="500px" custom-class="dialog-bg">
          <el-form label-width="70px" class="xi-form" :model="formEdit">
              <el-form-item label="数据名称">
                  <!-- <el-input v-model="formEdit.name" /> -->
                  <el-input v-model="newFrom.name"  />
  ​
              </el-form-item>
  ​
              <el-form-item label="数据简介">
                  <el-input v-model="formEdit.remarks" />
              </el-form-item>
          </el-form>
          <template #footer>
              <span class="dialog-footer">
                  <el-button @click="editVisible = false">取 消</el-button>
                  <el-button type="primary" @click="updateData">保存</el-button>
              </span>
          </template>
      </el-dialog>
  </template>
  ​
  <script >
  import { watch, ref, computed, onMounted, getCurrentInstance, reactive } from "vue";
  import { ximessage } from "../../utils/xiMessage";
  export default {
  ​
      name: "indexedit",
      props: {
          formEdit: Array
      },
  ​
      setup(props, content) {
          const { proxy } = getCurrentInstance();
          const editVisible = ref(false)
          const formEdit = ref([])
          const formEdit2 = ref([])
          formEdit.value = props.formEdit
  ​
          const newFrom = reactive({
              name: '',   //保存新输入的值
  ​
          })
  ​
  ​
          function open(data) {
              formEdit.value = data
              formEdit2.value = JSON.parse(JSON.stringify(data)); 
      
              newFrom.name = data.name;
  ​
              editVisible.value = true;
          }
  ​
  ​
  ​
          const updateData = function () {
        
  ​
              console.log('formEdit.value', formEdit.value)
       
              formEdit2.value.name = newFrom.name;
  ​
              proxy
                  .$httpM1Service(
                      "/dataSource/data-source-manage/update",
                      formEdit2.value,
                      "post"
                  )
                  .then((res) => {
                      if (res.success) {
                          ximessage.success("修改成功");
                          editVisible.value = false;
                           formEdit.value.name = formEdit2.value.name 
                      }
                  });
          };
          return {
              open,
              editVisible,
              formEdit,
              formEdit2,
              updateData,
               newFrom, 
  ​
          }
      }
  }
  </script>

 

总结: 这里主要想说一下这个js 的深拷贝,var deep = = JSON.parse(JSON.stringify(data));

浅拷贝: 拷贝之后数组各个值的指针还是指向相同的存储地址