[Vuejs]-Grouping HTML elements in vuejs using v-for

by

0👍

The reason this doesn’t work…

    <div v-if="index % 3 === 0">
       </div>
       <div class="row">
    </div>

is that unlike server side templating, which treats the content as strings, vue interprets that html as js, and you’re passing un-terminated elements.

Nested loops is the easiest way to do this

here is an example (I’m using table instead of divs, to illustrate the point with less css, but the rest should be the same)

new Vue({
  el: "#app",
  data: {
    imgs: ['img0', 'img1', 'img2', 'img3', 'img4', 'img5', 'img6', 'img7', 'img8', 'img9', 'img10'],
    numCols: 3,
  },
  computed: {
   numRows(){
   	return Math.ceil(this.imgs.length / this.numCols)
   }
  }
})
table {
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.2/vue.js"></script>

<table id="app">
  <tr v-for="row in numRows+1">
    <td v-for="col in imgs.slice((row-1)*numCols, row * numCols)">
      <div>
        {{col}}
      </div>
    </td>
  </tr>
</table>

You may be able to skip the nested v-for if you want to provide three items manually.

Leave a comment