Some checks failed
Build docker and publish / linux (1.24.5) (push) Failing after 39s
feat(抽奖动态): 修复抽奖动态未渲染问题并优化文案展示 fix(用户概览): 修复用户概览无数据显示问题 feat(新用户列表): 在新用户列表显示称号明细 refactor(待办事项): 移除代办模块并全宽展示实时动态 feat(批量操作): 限制为单用户操作并在批量时提醒 fix(称号分配): 防重复分配称号的改造计划 perf(接口性能): 优化新用户和抽奖动态接口性能 feat(订单漏斗): 优化订单转化漏斗指标计算 docs(测试计划): 完善盲盒运营API核查与闭环测试计划
1.8 KiB
1.8 KiB
问题分析
- 组件
coupon-dialog.vue在setup中使用了:watch(() => props.data, (newData) => { ... else { resetForm() } }, { immediate: true }) resetForm在源码中以const resetForm = () => { ... }形式定义在watch之后。由于immediate: true会在初始化阶段立即执行回调,导致在resetForm尚未初始化之前被调用,抛出ReferenceError: Cannot access 'resetForm' before initialization。
修复方案
- 将
resetForm改为函数声明并上移到watch之前:
function resetForm() {
form.value = { name:'', coupon_type:1, discount_type:1, discount_value:0, valid_days:30, status:1, remark:'' }
}
- 函数声明具备提升(hoisting),不会出现“未初始化”问题。
- 位置调整到
rules与dialogTitle定义之后、watch(props.data, ...)之前。
-
保留
immediate: true(业务期望首次打开时即填充/重置),无需改动;如需更稳健可补充flush: 'post',但此处核心是函数提升顺序问题。 -
可选强化
- 如同时监听
visible,建议统一在watch中使用已声明的resetForm与fillFormFromProps(newData)两个函数,避免将逻辑直接写在回调内。 - 若依赖
formRef.resetFields()的时机,考虑在handleClose使用nextTick保证 DOM 与表单实例可用。
变更清单
- 文件:
web/admin/src/views/operations/coupons/modules/coupon-dialog.vue - 改动:
- 将
resetForm改为函数声明并移动到watch之前。 - (可选)在
watch的第三参数加入flush: 'post'。
- 将
验收
- 打开/切换数据源时不再出现
ReferenceError。 - 创建/编辑模式下首次加载和重置行为保持一致(
immediate: true生效)。
确认后我将按上述方案修改代码并验证。