VueJSでv-forを使用してデータを表示

Question

配列からデータをループします。問題は、ループが3つの空のテーブルを作成し、アイテムを呼び出すことが原因であると推測していることです。 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/