Vue组件嵌套用v-for报错：Property or method未在实例上定义

Hey，我看了你的代码问题，核心是标签语法错误导致的循环变量作用域异常，咱们一步步来理清楚：

问题根源 #

你原来的代码第17行写成了：

<td v-for="h in hs"/>{{h}}</td>

这里的<td v-for="h in hs"/>是自闭合标签，意味着这个循环的<td>已经结束了，后面的{{h}}和</td>完全在循环作用域之外，自然找不到变量h，所以会报错。

你后来改成<td v-for="h in hs" :h="h"/>{{h}}</td>，虽然渲染看似正常，但本质问题没解决：浏览器会自动修正错误的DOM结构，但循环外的{{h}}依然处于错误的作用域，所以报错会持续，而且多余的标签可能带来潜在的布局问题。

正确写法 #

只需要修正标签结构，把自闭合的<td/>改成开放标签，让{{h}}处于循环的<td>内部，同时加上Vue要求的key属性（最佳实践）：

<tr>
  <td>date debut</td>
  <td>date fin</td>
  <td v-for="h in hs" :key="h">{{ h }}</td>
</tr>

• 不需要额外绑定:h="h"，因为v-for的循环变量h本身就在当前<td>的作用域里，直接用就行。
• :key="h"用来帮助Vue跟踪每个节点的身份，避免重复渲染或顺序错乱的问题。

为什么之前改后渲染正常但报错？ #

这是因为浏览器的DOM解析会自动修复不规范的标签结构（比如把多余的</td>匹配到合适的位置），但Vue的模板编译依然会检测到作用域错误，所以控制台还是会报h未定义的提示。

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