Question

我已经让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：请求未定义”（即使我将v-if指令退出，甚至完全删除了额外的<tr>，所以VueJS正在考虑我可能还不了解的DOM结构。

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

顺便说一下，有没有一种纯HTML / CSS方式可以做到这一点？

Answer 1

您的代码包含无效的HTML。您无法span换行tr。

通常无效的HTML并不是什么大不了的事，但是在处理无效的tr / td展示位置时，浏览器极其错误（规范并不清楚它们应该做什么错误，因此它们针对特定情况/错误以特定方式表现。）

正确的方法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>

演示再现错误：

＆＃13;

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

＆＃13;

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

＆＃13;

使用修复演示：

＆＃13;

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

＆＃13;

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

＆＃13;

vuejs每25或50条记录

1 个答案: