Vue3中v-for索引参数无法读取，是否为table标签导致？

我尝试访问v-for的索引参数idx，但系统提示该参数未定义。请问问题出在哪里？是否是table标签的问题？

测试代码1（带v-if，无法运行） #

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
<tbody>
  <tr v-for="(item, idx) in message">
    <div v-if="idx <= 3">  
      {{ idx }}
    </div>
  </tr>
</tbody>
</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref(['a', 'b', 'c', 'd', 'e', 'f'])
      return {
        message
      }
    }
  }).mount('#app')
</script>

测试代码2（移除v-if，仍无法运行） #

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
<tbody>
  <tr v-for="(item, idx) in message">
    {{ idx }}
  </tr>
</tbody>
</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref(['a','b','c','d','e','f'])
      return {
        message
      }
    }
  }).mount('#app')
</script>

测试代码3（改用div标签，可正常运行） #

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
  <div v-for="(item, idx) in message">
      {{idx}}
  </div>
</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref(['a','b','c','d','e','f'])
      return {
        message
      }
    }
  }).mount('#app')
</script>

问题根源是HTML结构不符合规范：<tbody>标签必须嵌套在<table>标签内部，直接把<tbody>放在<div>里是无效的DOM结构。

浏览器在解析这种不规范的结构时，会自动修正DOM，把<tbody>移到外部，导致Vue的v-for指令所在的<tr>脱离了原本的上下文，最终引发idx未定义的错误。

修复方法很简单，给<tbody>套上<table>标签即可，同时注意<tr>内部应该用<td>标签承载内容（符合table结构规范），修改后的代码如下：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
  <table>
    <tbody>
      <tr v-for="(item, idx) in message">
        <td>{{ idx }}</td>
      </tr>
    </tbody>
  </table>
</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref(['a', 'b', 'c', 'd', 'e', 'f'])
      return {
        message
      }
    }
  }).mount('#app')
</script>

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