產生動態圖片網格：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)
}