title: Displaying data using v-for with VueJS
body: <p>Looping data from an array. The problem is that the loop creates 3 empty tables, guessing it's because im calling item. 3 times. If I want the data from the array without Vue creating empty tables, how should I display the data? Been trying to use {{users.firstname}} without the v-for loop but doesn't seem to work.</p>
  
  <pre><code>&lt;table v-for="item in users"&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td&gt;{{ item.username }}&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;{{ item.firstname }}&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;{{ item.lastname }}&lt;/td&gt;
            &lt;/tr&gt;
         &lt;/tbody&gt;
        &lt;/table&gt;
  </code></pre>
  
  <p>Solved using <code>&lt;template v-for="item in users" v-if="item.username &amp;&amp; item.firstname &amp;&amp; item.lastname"&gt;</code>. No extra elements are printed out.</p>