Populating table with object containing an array in vuejs? - html-table

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>

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