像在 php foreach 中一样在 vue js 中循环以获得 html table

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

所以我想在 vue.js 中循环遍历它们，就像在 table 中的 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>

但是在 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>

但是我的 table 结构坏了。我想得到完全像这样的结构。

HTML Table 结果

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

视觉效果一定是这样的

请帮帮我

Answer 1

只需使用 <template> 标签而不是 <div> 进行循环，这样 table 结构就不会被破坏：

<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> 标记视为占位符

Answer 2

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

像在 php foreach 中一样在 vue js 中循环以获得 html table

looping in vue js like in php foreach to get html table

javascript

php

foreach

vue.js

v-for