vuejs 每 25 或 50 条记录重复一个图例行到表格答案

【问题标题】：vuejs repeat a legend row to table every 25 or 50 recordsvuejs 每 25 或 50 条记录重复一个图例行到表格
【发布时间】：2018-04-05 15:03:23
【问题描述】：

我已经让 VueJS v-for 工作正常：

<tr v-for="request in requests">
    <td>{{request.name}}</td>
    <td> .. etc .. </td>
</tr>

现在我需要添加一个图例/引导行，比如每 25 或 50 条记录，如下所示：

<span v-for="(request, index) in requests">
    <tr>
        <td>{{request.name}}</td>
        <td> .. etc .. </td>
    </tr>
    <tr v-if="index % 25 == 0">
        <th>Name</th>
        <th> .. etc .. </th>
    </tr>
</span>

令我惊讶的是，不仅v-if 部分不起作用，而且我返回一个错误：“ReferenceError: request is not defined”（即使我离开了v-if 指令，甚至删除了额外的@ 987654326@ 完全），所以 VueJS 正在考虑 DOM 结构，也许我还不明白。

不管怎样，我该怎么做？

顺便问一下，有没有纯 HTML/CSS 的方式来做到这一点？

【问题讨论】：

标签： html vue.js v-for

【解决方案1】：

您的代码包含无效的 HTML。你不能让spans 包裹trs。

通常无效的 HTML 没什么大不了的，但是浏览器在处理无效的 tr/tds 位置时非常有问题（规范不清楚他们应该在错误的情况下做什么，所以他们针对特定情况/错误以特定方式处理每个问题）。

正确做法is to use <template>s, aka "Conditional Groups"：

<table>
    <template v-for="(request, index) in requests">
        <tr>
            <td>{{request.name}}</td>
            <td> .. etc .. </td>
        </tr>
        <tr v-if="index % 25 == 0">
            <th>Name</th>
            <th> .. etc .. </th>
        </tr>
    </template>

演示重现您的错误：

new Vue({
  el: '#app',
  data: {
    requests: [{name: 'a1'},{name: 'a2'},{name: 'a3'},{name: 'a4'},{name: 'a5'},{name: 'a6'},{name: 'a7'},{name: 'a8'}]
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">

  <table border="1">
    <span v-for="(request, index) in requests">
      <tr>
        <td>{{request.name}}</td>
        <td> .. etc .. </td>
      </tr>
      <tr v-if="index % 3 == 0">
        <th>Name</th>
        <th> .. etc .. </th>
      </tr>
    </span>
  </table>
  
</div>

修复演示：

new Vue({
  el: '#app',
  data: {
    requests: [{name: 'a1'},{name: 'a2'},{name: 'a3'},{name: 'a4'},{name: 'a5'},{name: 'a6'},{name: 'a7'},{name: 'a8'}]
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">

  <table border="1">
    <template v-for="(request, index) in requests">
      <tr>
        <td>{{request.name}}</td>
        <td> .. etc .. </td>
      </tr>
      <tr v-if="index % 3 == 0">
        <th>Name</th>
        <th> .. etc .. </th>
      </tr>
    </template>
  </table>
  
</div>

【讨论】：