我用的watch 来监听form表单每次的变化,点击取消之后,数据任然变化了,简单说就是深拷贝和浅拷贝的问题。

解决办法:

父组件:

<script>
  methods:{
    //编辑方法
    UpdateFormDatas(data) {
      this.dialogVisible = false;

      let newTable = [];
      this.tableData.map((item) => {
        if (item.ID == data.ID) {
          newTable.push(data);
        } else {
          newTable.push(item);
        }
      });
      this.tableData = newTable;
      console.log("编辑成功之后===", this.tableData);
    },
  }
</script>

子组件(form表单)

<script>
    /接收父组件传递过来的值
   props: {
    form: {
      type: Object,
      default: {},
    },
  },


  //监听
  watch: {
    //#region 监听变量
    //这是监听变量的写法
    // form(newVal, oldVal) {
    //   debugger;
    //   if (newVal && newVal.length == 0) {
    //     this.newFrom = {
    //   ID: "",
    //     aircraftNum: "",
    //     aircraftModel: "",
    //     isenable: "",
    //     isOK: "",};
    //   } else {
    //     this.newFrom = newVal;
    //   }
    // },
    //#endregion
    //这是监听对象的写法
    form: {
      handler(newValue, oldValue) {
        if (JSON.stringify(newValue) == "{}") {
          this.newFrom = {
            ID: "",
            aircraftNum: "",
            aircraftModel: "",
            isenable: "",
            isOK: "",
          };
        } else {
          //传过来的是对象的话,是这种形式
          this.newFrom = JSON.parse(JSON.stringify(newValue));
        }
        console.log("oldValue:", oldValue);
        console.log("newValue:", newValue);
      },
      deep: true, // 深度监听:值变了也能监听到,如果不写这句,就只能监听到this.newFrom有没有变,而不能监听到其里面的值有没有变
      immediate: true, //初始化时也调用
    },
  },
</script>

监听对象和变量的写法不同,在此文章中可以查看https://blog.csdn.net/CMDN123456/article/details/129805084

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐