嵌套for循环能否访问父级变量？访问design属性报key not found原因查询

问题排查与解决方法 #

1. 作用域问题排查 #

首先在内层循环中加入调试代码，直接打印${design}或${design.string_inverters}：

• 如果这一步就抛出报错，说明是外层变量没有传递到内层作用域，不同场景的修复规则如下：
  • Vue v-for场景：默认支持直接访问父层迭代变量，检查内层循环是否定义了同名的design变量覆盖了外层值即可
  • Jinja2/Nunjucks等模板引擎场景：部分版本嵌套循环默认不继承父层上下文，需要通过父层指针访问，把语法改成${loop.parent.design.string_inverters[array.string_inverter.index].name}即可
  • 原生JS for循环场景：不存在默认作用域隔离问题，必然是内层重名变量覆盖了外层design，排查重命名即可
• 如果调试可以正常打印design.string_inverters数组，说明作用域没有问题，问题出在索引写法上

2. 索引写法问题排查 #

• 检查array.string_inverter.index的类型：如果返回的是字符串格式的数字（比如"2"而不是2），数组用字符串索引访问就会触发key not found，修改为强制转数字即可：

  ${design.string_inverters[Number(array.string_inverter.index)].name}
  

• 检查索引值是否越界：确认array.string_inverter.index的数值小于design.string_inverters的数组长度，就算你确认design存在对应key，也要核对索引值是否刚好在数组下标范围内
• 检查模板语法适配：部分低版本模板引擎不支持方括号嵌套变量，需要改用拼接写法，比如${design.string_inverters.${array.string_inverter.index}.name}

临时兼容方案 #

如果短时间查不出具体原因，可以在外层循环第一行先把design.string_inverters赋值给临时变量，绕开作用域问题：
外层循环内第一行写：const currentInverters = design.string_inverters
内层直接访问：${currentInverters[array.string_inverter.index].name}

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