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

あなたは明らかに不足している：あなたはそれぞれが独自の行を持ちたい場合、あなたは（あなたがresultのために行ったように）<tr>タグにv-forを配置する必要があります。正確にあなたが<td>の対処方法を空中にあるが、それはこのように行くかもしれない：

<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をしたいエンティティを作成するタグのタイプに関連付けることである