Generate dynamic image grid: vue.js usage guide

Question

<template>
      <q-page class="page bg-brown-2 q-pa-lg">
        <div v-for="x in 15" :key="x" class="line flex flex-center row">
          <div v-for="y in 24" :key="y" class="pic">
            <q-img :src="require('../assets/Pictures/' getImageId(x,y) '.png')"></q-img>
          </div>
        </div>
      </q-page>
    </template>

    <script>

    export default ({
      name: 'BigPicturePage',

      methods: {
        getImageId(row, col) {
          let picture_id = 359 - ((row - 1) * 24) (col - 1)
          return picture_id
        },
      }
    })
    
    </script>

So I want to generate an image grid in vue.js of a large image consisting of many small images of the same size. First I use a v-for loop to loop through the rows and create 15 of them (the whole image is 15x24 images) while iterating using an x ​​counter. Internally, I use another v-for to fill the 24 columns of each row. If I just give y as a number in the url, it renders the same row 15 times, but it works. When I try to use a simple function getImageId(rows, columns), it renders nothing and the entire website is blank. The calculation of the image ID is based on a count of 0-359, but to get the correct arrangement of the pictures, I did the reverse calculation. I subtracted the number of rows from 359 minus 1 since I found the range starts at 1 and multiplied by 24 to get the starting index of each row. After that, I add the current column index to the counter, decreasing from 359 to 0 from row to column. I guess the problem lies with my usage of vue syntax and structure as I'm not very familiar with it. Any help is welcome.

Answer 1

I discovered that the website was trying to load an image with id 360, but that image didn't exist, and the whole function I designed was to make sure the id never exceeded 359 under any circumstances, so I don't know why. ..

You didn't design the function that way. Using 1 and 2 will give you that result... If you want all images from 359 to 0, why not just get them and display them in order?

console.log(test(1,1)) // 359
console.log(test(1,2)) // 360

function test(row, col) {
  return 359 - ((row - 1) * 24) + (col - 1)
}