Search code examples
javascriptphpforeachvue.jsv-for

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

I have array of objects like this

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

So I want to loop over them in vue.js like in php foreach loop in table and get result like this.

PHP loop.

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

But in vue.js v-for directive I cant do the same I try to something like this.

Vue loop.

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

But my table structure has broked. I want to get structure exactly like this.

HTML Table result 

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

visual result must be like this.enter image description here

Please help me

Solution

  • So it seems Vamsi has technically given the solution, but the markup needed to also be fixed with an extra <td></td> around the room 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>

    See Image