title: looping in vue js like in php foreach to get html table
body: <p>I have array of objects like this</p>
  
  <pre><code>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}] },
  ];
  </code></pre>
  
  <p>So I want to loop over them in vue.js  like in php foreach loop in table and get result like this.</p>
  
  <p>PHP loop.</p>
  
  <pre><code>&lt;table v-for="type in rooms"&gt;
     &lt;tbody&gt;
        @foreach($types as $type)
          &lt;tr&gt;
             &lt;td&gt;{{ type-&gt;name }}&lt;/td&gt;
          &lt;/tr&gt;
          @foreach($type-&gt;rooms as $room)
               &lt;tr&gt;{{ $room-&gt;id }}
          @endforeach
        @endforeach
     &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>But in vue.js v-for directive I cant do the same I try to something like this.</p>
  
  <p>Vue loop.</p>
  
  <pre><code>&lt;tbody&gt;
     &lt;div v-for="type in rooms"&gt;
        &lt;tr&gt;
          &lt;td&gt;{{ type.name }}&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr v-for="room in type.rooms"&gt;{{ room.id }}&lt;/tr&gt;
     &lt;/div&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>But my table structure has broked. I want to get structure exactly like this.</p>
  
  <p>HTML Table result </p>
  
  <pre><code>&lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;Twin/Double&lt;/td&gt;
      &lt;/tr&gt; 
      &lt;tr&gt;
          &lt;td&gt;Room - 4&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Room - 5&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;Triple&lt;/td&gt;
      &lt;/tr&gt; 
      &lt;tr&gt;
          &lt;td&gt;Room - 2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Room - 3&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;Family&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Room - 6&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Room - 7&lt;/td&gt;
      &lt;/tr&gt;
  </code></pre>
  
  <p></p>
  
  <p>visual result must be like this.<a href="https://i.stack.imgur.com/c5mVj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c5mVj.png" alt="enter image description here"></a></p>
  
  <p>Please help me</p>