動的画像グリッドの生成: vue.js 使用ガイド

Question

<テンプレート>
      <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-ページ>
    </テンプレート>

    <スクリプト>

    エクスポートのデフォルト ({
      名前: 'BigPicturePage',

      メソッド: {
        getImageId(行, 列) {
          ピクチャーID = 359 - ((行 - 1) * 24) (列 - 1) とします。
          画像IDを返す
        }、
      }
    })
    
    </script>

そこで、同じサイズの多数の小さな画像で構成される大きな画像の画像グリッドを vue.js で生成したいと考えています。まず、v-for ループを使用して行をループし、x カウンターを使用して反復しながら 15 個の行を作成します (画像全体は 15x24 画像です)。内部的には、別の v-for を使用して各行の 24 列を埋めます。 URL の数値として y を指定すると、同じ行が 15 回表示されますが、機能します。単純な関数 getImageId(rows, columns) を使用しようとすると、何も表示されず、Web サイト全体が空白になります。画像 ID の計算は 0 ～ 359 のカウントに基づいていますが、写真の正しい配置を取得するために、逆の計算を行いました。範囲が 1 から始まることがわかったので、359 マイナス 1 から行数を減算し、24 を乗じて各行の開始インデックスを取得しました。その後、現在の列インデックスをカウンターに追加し、行ごとに 359 から 0 に減少します。私は vue の構文と構造にあまり慣れていないので、問題は私の使用法にあると思います。お手伝いは大歓迎です。

Answer 1

Web サイトが ID 360 の画像をロードしようとしていたことがわかりましたが、その画像は存在しませんでした。私が設計した関数全体は、いかなる状況でも ID が 359 を超えないようにすることでした。理由はわかりません。..

そのように関数を設計したわけではありません。 1と2を使用すると、その結果が得られます... 359 から 0 までのすべての画像が必要な場合は、それらを取得して順番に表示してみてはいかがでしょうか。

リーリー