Générer une grille d'images dynamique : guide d'utilisation de vue.js

Question

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

    <script>

    export par défaut ({
      nom : 'BigPicturePage',

      méthodes : {
        getImageId (ligne, colonne) {
          soit Picture_id = 359 - ((ligne - 1) * 24) + (col - 1)
          retourner l'id_image
        },
      }
    })
    
    </script>

Je souhaite donc générer une grille d'images dans vue.js d'une grande image composée de nombreuses petites images de même taille. J'utilise d'abord une boucle v-for pour parcourir les lignes et en créer 15 (l'image entière est constituée d'images 15x24) tout en utilisant un compteur x pour parcourir. En interne, j'utilise un autre v-for pour remplir les 24 colonnes de chaque ligne. Si je donne simplement y comme nombre dans l'URL, la même ligne est affichée 15 fois, mais cela fonctionne. Lorsque j'essaie d'utiliser une simple fonction getImageId (lignes, colonnes), elle ne restitue rien et l'ensemble du site Web est vide. Le calcul de l'ID de l'image est basé sur un décompte de 0 à 359, mais pour obtenir la bonne disposition des images, j'ai effectué le calcul inverse. J'ai soustrait le nombre de lignes de 359 moins 1 puisque j'ai trouvé que la plage commence à 1 et multipliée par 24 pour obtenir l'index de départ de chaque ligne. Après cela, j'ajoute l'index de colonne actuel au compteur, passant de 359 à 0 de ligne en colonne. Je suppose que le problème réside dans mon utilisation de la syntaxe et de la structure de vue, car je ne les connais pas très bien. Toute aide est la bienvenue.

Answer 1

J'ai découvert que le site Web essayait de charger une image avec l'identifiant 360 qui n'existe pas et toute la fonction que j'ai conçue est de m'assurer que l'identifiant ne dépasse jamais 359 en aucune circonstance, donc je ne sais pas pourquoi...

Vous n'avez pas conçu la fonction de cette façon. Utiliser 1 et 2 vous donnera ce résultat... Si vous voulez toutes les images de 359 à 0, pourquoi ne pas simplement les récupérer et les afficher dans l'ordre ?

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

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