Vue嵌套stageStat属性后mouseover事件不触发且testCount未定义怎么解决

核心问题 #

你的GraphQL查询返回的stageStat结构和你前端调整后的预期结构不匹配。
你前端调整后要求stageStat下嵌套testCount对象存统计数据，但你直接把后端返回的res.data.stageStat赋值给了this.stageStat——如果后端返回的还是调整前的结构（也就是total/success这些字段直接挂在stageStat根下，没有嵌套testCount），赋值后原本初始定义的testCount属性会被直接覆盖掉，导致this.stageStat.testCount变成undefined。

这个问题完全可以解释你遇到的所有现象：

• 模板里v-if="stageStat.testCount && stageStat.testCount.total"条件永远不成立，整个DOM块根本没有渲染，绑定的鼠标事件自然不会触发，也不会报错
• 你改成直接访问stageStat.testCount.total就会报testCount是undefined的错误
• 你在2:HERE位置尝试给this.stageStat.testCount的属性赋值，这时候testCount已经是undefined了，赋值操作自然不生效

修复方案 #

可以二选一：

1. 修改GraphQL查询语句，让后端返回的stageStat按照新结构返回testCount嵌套字段
2. 如果后端暂时没法改结构，前端赋值的时候自己做一层结构转换，示例如下：

this.stageStat = {
  testCount: {
    total: res.data.stageStat.total,
    success: res.data.stageStat.success,
    fail: res.data.stageStat.fail
    // 其他需要的字段
  },
  // 其他stageStat下的原有字段
}

额外注意点 #

• 你在无数据的回退逻辑里，testCount下的失败字段写的是failed，但初始定义里是fail，拼写不一致会导致后续取值出错
• 如果你要保留2:HERE位置的手动赋值逻辑，要先保证this.stageStat.testCount存在，或者直接替换整个testCount对象，不要给undefined的属性设值

内容的提问来源于stack exchange，提问作者PuffedRiceCrackers