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

Question

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.

Please help me

you don't have table headers in your example and no closing tag for tbody either. Are you sure this is what you want? — samayo
– samayo, Commented Dec 16, 2017 at 8:11
@samayo I only want with this example with closed tbody. I have thad with th-s. — David
– David, Commented Dec 16, 2017 at 8:13
maybe add a simple table of what the output is supposed to look like then — samayo
– samayo, Commented Dec 16, 2017 at 8:19

jostrander · Accepted Answer · 2017-12-16 23:18:24Z

1

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>

answered Dec 16, 2017 at 23:18

jostrander

7445 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vamsi Krishna · Accepted Answer · 2017-12-16 09:44:50Z

0

Just use a <template> tag instead of <div> for looping so that the table structure is not broken:

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

The <template> tag will not be rendered but its children's will be rendered . You can think the <template> tag as a placeholder

edited Dec 16, 2017 at 9:44

answered Dec 16, 2017 at 9:20

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related