在vuejs中使用包含数组的对象填充表？

Question

我想用包含数组的对象填充表。我能够成功地做到这一点，但我希望每个任务名称都有自己的行，现在他们会排成一行。

{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

你缺少明显的：如果你想每个人都有自己的行，你需要把v-for在<tr>标签（像你这样的result）。你究竟如何应对<td> s是在空中，但它可能是这样的：

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

或者，如果你的意思是你想每个人要在表格单元格内一个单独的行，也可能是

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

主要的想法是，你希望v-for与标签的创建要在每个task的实体类型相关联