Vue弹窗中如何重置reactive对象planModel到初始状态

Vue 弹窗中重置reactive对象planModel到初始状态

在使用 Vue 开发弹窗组件时，你可能遇到这样的场景：弹窗打开时，const planModel = reactive({ ... }); 中间操作过程中planModel可能新增了许多别的字段，当弹窗关闭时如何将planModel初始化成最开始的状况？

可以使用 Vue 的reset方法来将planModel重新赋值为最开始的状态。

1. 定义初始状态

首先，你需要定义一个包含初始状态的 initialPlanModel 对象：

const initialPlanModel = {
  'other': '无新冠肺炎主观症状及流行学病史',
  'pregDiseaseHistory': '0',
  'visitType': '0',
  'pregFamilyHistory': '0',
  'pregPersonalHistory': '0',
  'heart': '1',
  'lung': '1',
  'outVirgina': '1',
  'virgina': '1',
  'neckUterus': '1',
  'uterus': '1',
  'gynOther': '1',
  'healthAdvice': '1,2,3,4,5',
  'fileStatus': '1',
  'changeStatus': '1',
};

2. 创建重置函数

然后，定义一个函数 resetPlanModel 来重置 planModel：

function resetPlanModel() {
  for (let key in planModel) {
    planModel[key] = initialPlanModel[key];
  }
}

3. 在弹窗关闭事件中调用重置函数

最后，在弹窗关闭的事件处理程序中调用 resetPlanModel 函数：

// 弹窗关闭的事件处理程序
function handleCloseModal() {
  // 关闭弹窗的其他逻辑...

  // 重置 planModel
  resetPlanModel();
}

总结

通过以上步骤，你就可以在弹窗关闭时将 planModel 重置到其初始状态。这种方法适用于需要在弹窗关闭后恢复原始状态的场景。

注意：

• initialPlanModel 对象应该包含 planModel 的初始状态。
• resetPlanModel 函数应该在弹窗关闭的事件处理程序中调用。
• 如果你使用的是其他状态管理库，可能需要修改代码以适应你的具体情况。