CODEWITHSUNDEEP
html-tablevue.js
Kushagra Agarwal
Kushagra Agarwal

Reputation: 1725

Populating table with object containing an array in vuejs?

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>

Upvotes: 0

Views: 1435

Answers (1)

Roy J
Roy J

Reputation: 43881

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.

Upvotes: 1

Related Questions