だから私はテーブルにPHPのforeachループで同じようvue.jsでそれらをループするHTMLテーブル

Question

私はこの

types:[ 
    { name:"Twin/Double", rooms:[{id:4}, {id:5}] }, 
    { name:"Twin/Double", rooms:[{id:2}, {id:3}] }, 
    { name:"Twin/Double", rooms:[{id:6}, {id:7}] }, 
]; 

のようなオブジェクトの配列を持っているを取得し、結果を得るために、PHPのforeachの中で、気に入りましJSにループこのような。

PHPループ。

<table v-for="type in rooms"> 
    <tbody> 
     @foreach($types as $type) 
     <tr> 
      <td>{{ type->name }}</td> 
     </tr> 
     @foreach($type->rooms as $room) 
      <tr>{{ $room->id }} 
     @endforeach 
     @endforeach 
    </tbody> 
</table> 

しかし、vue.jsのv-forディレクティブでは、私はこのようなことをやりなおすことはできません。

ビューループ。

<tbody> 
    <div v-for="type in rooms"> 
     <tr> 
     <td>{{ type.name }}</td> 
     </tr> 
     <tr v-for="room in type.rooms">{{ room.id }}</tr> 
    </div> 
</tbody> 

私のテーブル構造は壊れています。私はこのような構造を得たいと思っています。

HTMLの表の結果

<tbody> 
    <tr> 
     <td>Twin/Double</td> 
    </tr> 
    <tr> 
     <td>Room - 4</td> 
    </tr> 
    <tr> 
     <td>Room - 5</td> 
    </tr> 

    <tr> 
     <td>Triple</td> 
    </tr> 
    <tr> 
     <td>Room - 2</td> 
    </tr> 
    <tr> 
     <td>Room - 3</td> 
    </tr> 

    <tr> 
     <td>Family</td> 
    </tr> 
    <tr> 
     <td>Room - 6</td> 
    </tr> 
    <tr> 
     <td>Room - 7</td> 
    </tr> 

視覚的な結果は次のようでなければなりません。

だけでテーブル構造が破壊されないように、ループのための代わり<div>の<template>タグを使用

Answer 1

Vamsiは技術的に解決策を提示しているようですが、マークアップも部屋IDの周りに<td></td>と固定する必要がありました。

<template> 
    <table> 
    <tbody> 
    <template v-for="type in types"> 
     <tr> 
      <td>{{ type.name }}</td> 
     </tr> 
     <tr v-for="room in type.rooms"> 
     <td>Room - {{ room.id }}</td> 
     </tr> 
    </template> 
    </tbody> 
    </table> 
</template> 

<script> 
    export default { 
    data() { 
     return { 
     types:[ 
      { name:"Twin/Double", rooms:[{id:4}, {id:5}] }, 
      { name:"Triple", rooms:[{id:2}, {id:3}] }, 
      { name:"Family", rooms:[{id:6}, {id:7}] }, 
     ] 
     } 
    } 
    } 
</script> 

<style> 
    tr, td { 
    border: 1px solid #ddd; 
    padding: 1.314em; 
    } 
</style> 

Answer 2

に私を助けてください：

<tbody> 
    <template v-for="type in rooms"> 
     <tr> 
     <td>{{ type.name }}</td> 
     </tr> 
     <tr v-for="room in type.rooms">{{ room.id }}</tr> 
    </template> 
</tbody> 

<template>タグがレンダリングされませんが、その子供がなりますレンダリングされる。 <template>タグをプレースホルダとして考えることができます