Displaying data using v-for with VueJS

Question

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.

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

Solved using <template v-for="item in users" v-if="item.username && item.firstname && item.lastname">. No extra elements are printed out.

Do you want 3 tables, one per item? Or do you want 3 rows per item? I'm not sure what your expected output is. — Brian Glaz
– Brian Glaz, Commented Nov 21, 2017 at 19:40
I want 1 table with 3 rows displaying different data on every row. Username Firstname and Lastname — Znowman
– Znowman, Commented Nov 21, 2017 at 19:47

cello · Accepted Answer · 2017-11-21 20:05:34Z

3

If you want to create 3 rows per user, use a <template> tag to group them, and use v-for on that template:

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

Have a look at this fiddle for an example: https://jsfiddle.net/nfa43bhq/

edited Nov 21, 2017 at 20:05

answered Nov 21, 2017 at 19:47

cello

5,5063 gold badges26 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Znowman Over a year ago

Hmm still adds empty rows, creates empty rows both above and below the rows that are actually displaying data.

Znowman Over a year ago

Works fine with the hardcoded data in your fiddle, problem is i'm getting data from an API that I put in the array, when i loop through, it creates empty elements for some reason.

Collectives™ on Stack Overflow

Displaying data using v-for with VueJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related