Javascript 在vue js中循环，就像在php foreach中循环一样，以获取html表

我有一组像这样的对象

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}] },
];

所以我想在vue.js中循环它们，就像在表中的php foreach循环一样，并得到如下结果

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>

@foreach（$type作为$type）
{{type->name}
@foreach（$type->rooms as$room）
{{$room->id}
@endforeach
@endforeach

但是在vue.js v-for指令中，我不能做同样的事情，我尝试这样做

Vue循环

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

{{type.name}}
{{room.id}

但是我的桌子结构坏了。我想得到像这样的结构

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>

双人房/双人房
房间-4
房间-5
三倍的
房间-2
房间-3
家庭
房间-6
房间-7

视觉效果一定是这样的

请帮助我

只需使用标记而不是

进行循环，这样表结构就不会被破坏：

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

{{type.name}}
{{room.id}

---

标记将不被呈现，但其子标记将被呈现。您可以将

标记视为占位符，因此看起来Vamsi在技术上给出了解决方案，但标记也需要在房间ID周围附加一个

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

{{type.name}}
房间-{{Room.id}
导出默认值{
数据（）{
返回{
类型：[
{姓名：“双人房/双人房”，房间：[{id:4}，{id:5}]}，
{name:“Triple”，房间：[{id:2}，{id:3}]}，
{姓名：“家庭”，房间：[{id:6}，{id:7}]}，
]
}
}
}
tr，td{
边框：1px实心#ddd；
填充：1.314em；
}

---

示例中没有表头，也没有tbody的结束标记。你确定这就是你想要的吗？@samayo我只想用这个封闭体的例子。我已经和th-s进行了讨论。也许可以添加一个简单的输出表then@samayo我添加了最终结果的图像，您可以观看。您可以检查答案吗？让我知道它是否适合你