生成动态图片网格：vue.js的使用指南

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>

所以我想在vue.js中生成一个由许多相同大小的小图像组成的大图像的图像网格。首先，我使用v-for循环遍历行，并创建15个（整个图像是15x24个图像），同时使用x计数器进行迭代。在内部，我使用另一个v-for来填充每一行的24列。如果我只给定y作为数字放在url中，它会渲染相同的行15次，但是它可以工作。当我尝试使用一个简单的函数getImageId(rows, columns)时，它不会渲染任何内容，整个网站都是空白的。图像ID的计算基于0-359的计数，但是为了得到正确的图片排列，我进行了反向计算。我从359中减去行数减1，因为我发现范围从1开始，乘以24以获得每行的起始索引。之后，我将当前列索引添加到计数器中，从行到列递减从359到0。我猜问题在于我对vue语法和结构的使用，因为我对它不太熟悉。欢迎任何帮助。

Answer 1

我发现，该网站试图加载id为360的图片，但该图片不存在，而我设计的整个函数是为了确保id在任何情况下都不超过359，所以我不知道为什么...

你并没有以那种方式设计函数。使用1和2会得到那个结果... 如果你想要从359到0的所有图片，为什么不直接获取它们然后按顺序显示呢？

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

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