在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的實體類型相關聯