Hasilkan grid imej dinamik: panduan penggunaan vue.js

Question

<template>
      <q-page class="halaman bg-brown-2 q-pa-lg">
        <div v-for="x dalam 15" :key="x"class="baris flex-center garis">
          <div v-for="y dalam 24" :key="y"
            <q-img :src="memerlukan('../assets/Pictures/' + getImageId(x,y) + '.png')"></q-img>
          </div>
        </div>
      </q-page>
    </template>

    <skrip>

    eksport lalai ({
      nama: 'BigPicturePage',

      kaedah: {
        getImageId(baris, kol) {
          biarkan picture_id = 359 - ((baris - 1) * 24) + (kol - 1)
          pulangkan picture_id
        },
      }
    })
    
    </script>

Jadi saya ingin menjana grid imej dalam vue.js imej besar yang terdiri daripada banyak imej kecil dengan saiz yang sama. Mula-mula saya menggunakan gelung v-for untuk menggelungkan melalui baris dan mencipta 15 daripadanya (keseluruhan imej ialah imej 15x24) sambil menggunakan pembilang x untuk berulang. Secara dalaman, saya menggunakan v-for yang lain untuk mengisi 24 lajur setiap baris. Jika saya hanya memberikan y sebagai nombor dalam url, ia memaparkan baris yang sama 15 kali, tetapi ia berfungsi. Apabila saya cuba menggunakan fungsi mudah getImageId(baris, lajur), ia tidak memberikan apa-apa dan keseluruhan tapak web kosong. Pengiraan ID imej adalah berdasarkan kiraan 0-359, tetapi untuk mendapatkan susunan gambar yang betul, saya melakukan pengiraan terbalik. Saya menolak bilangan baris daripada 359 tolak 1 kerana saya mendapati julat bermula pada 1 dan didarab dengan 24 untuk mendapatkan indeks permulaan setiap baris. Selepas itu, saya menambah indeks lajur semasa ke kaunter, menurun daripada 359 kepada 0 dari baris ke lajur. Saya rasa masalahnya terletak pada penggunaan sintaks dan struktur vue saya kerana saya tidak begitu biasa dengannya. Sebarang bantuan dialu-alukan.

Answer 1

Saya dapati laman web tersebut cuba memuatkan imej dengan id 360 yang tidak wujud dan keseluruhan fungsi yang saya reka adalah untuk memastikan id tidak pernah melebihi 359 dalam apa jua keadaan jadi saya tidak tahu mengapa...

Anda tidak mereka bentuk fungsi seperti itu. Menggunakan 1 dan 2 akan memberikan anda hasil itu... Jika anda mahukan semua imej dari 359 hingga 0, mengapa tidak dapatkannya dan paparkannya mengikut urutan?

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

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