vue2对象丢失响应式解决办法

最新推荐文章于 2024-07-12 16:27:40 发布

每天吃饭的羊

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量259

点赞数

分类专栏： # vue2 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_47999208/article/details/135224594

版权

vue2 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<template>
  <div>
    {{dialogForm}} <div @click="updateDialogForm">99909009</div>
    <!-- Your component template here -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogForm: {
        returnNode: "",
        returnRatio: "",
        returnMoney: "",
        contractWaitReturnMoney: "",
        returnWay: "",
        returnCondition: "",
        remark: "",
      },
    };
  },
  methods: {
    updateDialogForm() {
      let newData={
        returnNode: "12",
        returnRatio: "23",
        returnMoney: "32",
        contractWaitReturnMoney: "32",
        returnWay: "32",
        returnCondition: "32",
        remark: "32",
      }
      // 遍历新数据对象，并使用 this.$set 更新 dialogForm
      Object.keys(newData).forEach((key) => {
        this.$set(this.dialogForm, key, newData[key]);
      });
    },
  },
  // Call this method whenever you want to update dialogForm with new data
  // For example, this.updateDialogForm({ returnNode: "new value", returnRatio: "new ratio", ... })
};
</script>