Populating table with object containing an array in vuejs?

Question

I am trying to populate table with an object which contains an array. I am able to successfully do that but I want each task name to have its own row right now they are coming in a single row.

{level_image :"image"level_name:"1"task_name: ["game","taskgame","jenga"]}

<tr v-for="tel in result" :key="tel.level_image" :pey="tel.level_name">
                  <td>{{tel.level_image}}</td>
                  <td>{{tel.level_name}}</td>
                  <td  v-for="task in tel.task_name">{{task}}</td>
 </tr>

Roy J · Accepted Answer · 2017-08-12 15:58:26Z

1

You're missing the obvious: if you want each one to have its own row, you need to put the v-for in a <tr> tag (like you did for result). Exactly how you deal with the <td>s is up in the air, but it might go like this:

<tr v-for="tel in result" :key="tel.level_image" :pey="tel.level_name">
  <tr v-for="task in tel.task_name">
    <td>{{tel.level_image}}</td>
    <td>{{tel.level_name}}</td>
    <td>{{task}}</td>
  </tr>
</tr>

Or if you mean you want each one to be on a separate line within a table cell, it could be

<tr v-for="tel in result" :key="tel.level_image" :pey="tel.level_name">
  <td>{{tel.level_image}}</td>
  <td>{{tel.level_name}}</td>
  <td><div v-for="task in tel.task_name">{{task}}</div></td>
</tr>

The main idea is that you want the v-for to be associated with the type of tag that creates the entity you want each task in.

edited Aug 12, 2017 at 15:58

answered Aug 12, 2017 at 15:49

Roy J

44k10 gold badges84 silver badges106 bronze badges

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

1 Comment

AWolf Over a year ago

I'd like to leave my fiddle to have a working example here.

Collectives™ on Stack Overflow

Populating table with object containing an array in vuejs?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related