如何在Vue子标签v-for中使用父级v-for生成的索引变量dialogIdx

核心问题 #

你遇到的问题分为两点：

1. HTML 表格结构不合法：<tr> 标签的直接子元素只能是 <td> 或 <th>，不能直接嵌套另一个 <tr>
2. v-for 指令的表达式写法错误：Vue 指令属性内部本身就是 JS 表达式上下文，不需要额外加模板字符串插值或 Mustache 语法插值

正确实现方案 #

推荐使用多 <tbody> 分组的方式实现需求，<table> 标签支持嵌套多个 <tbody> 做行分组，既符合 HTML 规范，也能满足父级索引传递的需求：

<table>
  <!-- 父级循环绑定在tbody上，每个dialog对应一组行 -->
  <tbody v-for="(dialog, dialogIdx) in $store.state.dialogSearch.content_keys" :key="dialogIdx">
    <tr>
      <td rowspan="11">
        <router-link to="" tag="button" class="btn-round">{{ dialog }} d</router-link>
      </td>
      <!-- 首行其余单元格内容可在此补充 -->
    </tr>
    <!-- 子级v-for直接引用父作用域的dialogIdx即可 -->
    <tr v-for="(content, contentIdx) in $store.state.dialogSearch.contents[dialogIdx]" :key="contentIdx">
      <!-- 子行单元格内容可在此补充 -->
      <td>{{ content }}</td>
    </tr>
  </tbody>
</table>

如果需要把嵌套列表放在单个单元格内，也可以在 <td> 内部嵌套子表格实现：

<table>
  <tr v-for="(dialog, dialogIdx) in $store.state.dialogSearch.content_keys" :key="dialogIdx">
    <td rowspan="11">
      <router-link to="" tag="button" class="btn-round">{{ dialog }} d</router-link>
    </td>
    <td>
      <!-- 子表格放在td内部，符合DOM结构规范 -->
      <table>
        <tr v-for="(content, contentIdx) in $store.state.dialogSearch.contents[dialogIdx]" :key="contentIdx">
          <td>{{ content }}</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

注意：Vue 模板的表达式上下文已经自动绑定组件实例，不需要额外加 this 前缀；所有 v-for 必须绑定唯一 key 属性，避免渲染异常。

错误写法原因 #

• 反引号+${}的模板字符串写法：v-for 不需要外层加字符串包裹，加反引号后属性值会被识别为静态字符串，不会解析为动态表达式
• {{dialogIdx}} 写法：双大括号仅适用于文本内容插值，不能用在属性内部的表达式中，属性内直接引用变量名即可

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