使用 v-for 和 VueJS 显示数据

Question

从数组中循环数据。问题是循环创建了 3 个空表，猜测是因为我正在调用 item。 3次。如果我想要数组中的数据而不用 Vue 创建空表，我应该如何显示数据？一直尝试在没有 v-for 循环的情况下使用 {{users.firstname}} 但似乎不起作用。

<table v-for="item in users">
        <tbody>
          <tr>
            <td>{{ item.username }}</td>
          </tr>
          <tr>
            <td>{{ item.firstname }}</td>
          </tr>
          <tr>
            <td>{{ item.lastname }}</td>
          </tr>
       </tbody>
      </table>

使用<template v-for="item in users" v-if="item.username && item.firstname && item.lastname"> 解决。没有额外的元素被打印出来。

Answer 1

如果您想为每个用户创建 3 行，请使用 <template> 标记对它们进行分组，并在该模板上使用 v-for：

  <table>
    <tbody>
      <template v-for="item in users">
        <tr>
          <td>{{ item.username }}</td>
        </tr>
        <tr>
          <td>{{ item.firstname }}</td>
        </tr>
        <tr>
          <td>{{ item.lastname }}</td>
        </tr>
     </template>
   </tbody>
  </table>

以这个小提琴为例：https://jsfiddle.net/nfa43bhq/