1

我有这样的对象数组

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>

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

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

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

2 回答 2

1

<td></td>因此，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>

看图片

于 2017-12-16T23:18:24.993 回答
0

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

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

于 2017-12-16T09:20:37.253 回答