vue中使用展开运算符不起作用

Question

vue 中使用展开运算符，没有成功

data() {
    return {
      billForm: {
        user_id: 0,
        men1095: 0, // 门架：1米X0.95米
        men1095_nots: '', // 新旧程度
        men1125: 0, // 门架：1米X1.25米
        men1125_nots: '', // 新旧程度
        men17095: 0,
        men17095_nots: '', // 新旧程度
        men19125: 0,
        men19125_nots: '', // 新旧程度
        cheng1: 0, // 撑：1米
        cheng19: 0,
        ban: 0, // 板
        ban_nots: '', // (板)新旧程度
        tou: 0, // 头
        tui: 0, // 腿
        lun: 0, // 轮
        lun_nots: '', // (板)新旧程度
        rent_day: 0, // 日租金
        deposit: 0, // 押金
        trans_cost: 0, // 运费
        my_driver_id: '', // 出租方：送货人
        receive_person: '', // 货物负责人: 拉货人或收货人
        build_address: '', // 施工地点
        bill_date_start: '', // 计费日期 (开始)
        bill_date_end: '', // 计费日期 (结束)
        nots: '' // 备注
      }
  }
}，
computed: {
  everyPartTotalCount() {
      return {
        men1095: 12, // 门架：1米X0.95米
        men1125: 32, // 门架：1米X1.25米
        men17095: 46,
        men19125: 4,

        cheng1: 5, // 撑：1米
        cheng19: 6,
        tou: 8, // 头

        ban: 7, // 板
        tui: 9, // 腿
        lun: 10, // 轮
        rent_day: 0 // 归还全部设备时，日租金要为0
      }
    }
}，
  methods: {
    returnAll() {
      this.billForm = { ...this.everyPartTotalCount }
    }
  }

控制台输出

感谢三位Da神的回答，我有点明白，但不知道如何解决，还是看不懂。我再贴一些想要的结果

将上面方框内数据，在这里我测试使用固定数据，即通过everyPartTotalCount()获得。点击 《归还全部设备》按钮时，赋值给下面对应数据

问题已解决，还是感谢各位！

下面提供，解题内容，是我粗心了！

Answer 1

引自免费微信小程序：皆我百晓生

在 Vue 中使用展开运算符（Spread Syntax）来合并对象属性是完全可行的，但是在您提供的代码片段中，问题不在于展开运算符本身，而是在于您尝试将 everyPartTotalCount 对象赋值给 billForm 时，没有考虑到 Vue 的响应式系统。

Vue 中的数据绑定依赖于其内部的响应式机制。当您在 data 函数中声明一个对象时，Vue 会自动为该对象的所有属性添加 getter 和 setter，以便能够追踪变化并更新视图。然而，直接用新对象替换原有的响应式对象（如 this.billForm = { ...this.everyPartTotalCount }），会导致 Vue 失去对原有对象属性的追踪。

要解决这个问题，请确保保留原始 billForm 的引用，并仅合并需要更新的部分：

methods: {
  returnAll() {
    // 使用 Vue.set 或 this.$set 来处理已有对象的属性更新，以保持响应性
    for (const key in this.everyPartTotalCount) {
      if (key !== 'rent_day') { // 假设 rent_day 不应被 everyPartTotalCount 覆盖
        this.$set(this.billForm, key, this.everyPartTotalCount[key]);
      }
    }
    // 或者如果要完全替换 billForm 内部的某个子对象，则可以这样操作
    // 注意：这将替换整个子对象，而不是单个属性
    // this.$set(this.billForm, 'someSubObject', {...this.everyPartTotalCount.someSubObject});
    
    // 若要保持 rent_day 的原值不变，可单独设置
    // 若 everyPartTotalCount.rent_day 应用于 billForm.rent_day，则无需这一行
    // this.billForm.rent_day = this.billForm.rent_day;
  }
}

这样，通过 Vue 提供的 $set 方法，您可以确保所有更改都会触发视图更新，即使这些更改涉及到深度对象的属性。对于简单对象属性，展开运算符通常可以直接工作，但对于 Vue 中已建立响应式的对象，可能需要采取上述方法来维护响应性。