[Vuejs]-Gridview with expandable collapsible rows html

by

0👍

There are many different ways to do this. One (easy) way is to load the initial grid in the created hook like so:

 this.initialGrid = createGrid(2, 4)

Where createGrid is defined as:

const createGrid = (rows, cols) => {
 const grid = []
 for (let i = 0; i < rows; i++) {
   grid[i] = []
   for (let j = 0; j < cols; j++) {
     grid[i][j] = "some/image" // could store respective image paths in an array and push them into the grid
   }
 }
 return grid
}

This will give you the 2 rows with four columns, provided you initialized createGrid as such. Then in the data hook you can store the grid with desired dimensions as an “original grid.” The template could be as simple as:

<div id="grid">
 <div class="flex-container"
      v-for="rows in showGrid">
 <!-- just a placeholder, you'd likely want an img tag, etc -->
   <div v-for="cols in rows">
      {{ cols }}
   </div>
 </div>
 <button
      v-show="!toggleLoadButton"
      @click="toggleLoadButton = true"
 >
 show more
 </button>
 <button
      v-show="toggleLoadButton"
      @click="toggleLoadButton = false"
 >
 show less
 </button>
</div>

Here is an example: https://codepen.io/anon/pen/VxQeRV?editors=1010
This solution is limited in that you either load the two rows or all rows.

Leave a comment