1

我已经让 VueJSv-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指令，甚至<tr>完全删除了额外的指令），所以 VueJS 正在考虑 DOM结构也许我还不明白。

无论哪种方式，我该怎么做？

顺便说一句，有没有一种纯粹的 HTML/CSS 方法来做到这一点？

4

1 回答 1

1

您的代码包含无效的 HTML。你不能有spans 包装trs。

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

正确的方法是使用<template>s，也就是“条件组”：

<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>

于 2018-04-05T15:58:19.443 回答