Çözüldü JavaScript Yazılan kod ile sonuç uyuşmuyor

Baklava Ordusu · 7 Haziran 2024

Başlığı nasıl yazayım bilemedim çünkü çok ama çok garip bir bug ile karşılaşıyorum. VueJS ile Tailwind kullanarak 8 Puzzle gibi birşey yapmaya çalıştım. Layout falan hazırdı iyi gidiyordu. Kod:

JavaScript:

<script setup>
import { ref } from "vue";

const images = ref([
  { source: "/src/assets/Image1/2.png", col: 2, row: 1 },
  { source: "/src/assets/Image1/3.png", col: 3, row: 1 },
  { source: "/src/assets/Image1/4.png", col: 1, row: 2 },
  { source: "/src/assets/Image1/5.png", col: 2, row: 2 },
  { source: "/src/assets/Image1/6.png", col: 3, row: 2 },
  { source: "/src/assets/Image1/7.png", col: 1, row: 3 },
  { source: "/src/assets/Image1/8.png", col: 2, row: 3 },
  { source: "/src/assets/Image1/9.png", col: 3, row: 3 },
]);
</script>

<template>
  <div
    class="grid grid-cols-3 grid-rows-3 size-auto gap-2 rounded-xl bg-green-900 p-1"
  >
    <img
      v-for="image in images"
      :src="image.source"
      :class="`rounded-lg col-start-${image.col} row-start-${image.row}`"
    />
  </div>
</template>

Ve sonuç görüntüde.

Dikkat ederseniz, en üst-sol resim highlight edilmiyor. Yani orada bir görüntü yok. Ama neden sonuç böyle anlam veremiyorum. 1 günüm gitdi bunun yüzünden. Belki cache problemidir diye başka tarayıcıda denedim sonuç aynı.

Hayır yani class'lar da yanlış değil. Bakınız:

brkdnmz · 7 Haziran 2024

Tailwind, dinamik olarak oluşturulan sınıfları desteklemiyor maalesef. Sınıflar çıktıda yer alıyor olsa bile etkisiz kaldıklarını gözlemleyebilirsiniz "Styles" kısmından. "Olsa aşırı iyi olurdu." dediğim özelliklerden ama durum bu... Zamanında benim de çok kafam karışmıştı.

Bunun üstesinden gelmek için çeşitli yollar var, ben clsx kütüphanesiyle bir örnek vereyim:

JSX:

import clsx from "clsx";
// ...
<template>
    <div class="grid grid-cols-3 grid-rows-3 size-auto gap-2 rounded-xl bg-green-900 p-1">
        <img v-for="image in images" :src="image.source" :class="clsx('rounded-lg',
            {
                'row-start-1': image.row === 1,
                'row-start-2': image.row === 2,
                'row-start-3': image.row === 3,
            },
            {
                'col-start-1': image.col === 1,
                'col-start-2': image.col === 2,
                'col-start-3': image.col === 3,
            },
        )" />
    </div>
</template>

clsx kullanmadan da şöyle bir çözüm mevcut:

JSX:

<div class="grid grid-cols-3 grid-rows-3 size-auto gap-2 rounded-xl bg-green-900 p-1">
    <img v-for="image in images" :src="image.source" :class="`rounded-lg
        ${image.row === 1 ? ' row-start-1' : image.row === 2 ? ' row-start-2' : ' row-start-3'}
        ${image.col === 1 ? ' col-start-1' : image.col === 2 ? ' col-start-2' : ' col-start-3'}
    `" />
</div>

Kütüphane, daha karmaşık durumlarda anlaşılırlığı koruyabilmeyi sağlıyor. Sevdiğim bir araç.

brkdnmz · 7 Haziran 2024

Tailwind, dinamik olarak oluşturulan sınıfları desteklemiyor maalesef. Sınıflar çıktıda yer alıyor olsa bile etkisiz kaldıklarını gözlemleyebilirsiniz "Styles" kısmından. "Olsa aşırı iyi olurdu." dediğim özelliklerden ama durum bu... Zamanında benim de çok kafam karışmıştı.

Bunun üstesinden gelmek için çeşitli yollar var, ben clsx kütüphanesiyle bir örnek vereyim:

JSX:

import clsx from "clsx";
// ...
<template>
    <div class="grid grid-cols-3 grid-rows-3 size-auto gap-2 rounded-xl bg-green-900 p-1">
        <img v-for="image in images" :src="image.source" :class="clsx('rounded-lg',
            {
                'row-start-1': image.row === 1,
                'row-start-2': image.row === 2,
                'row-start-3': image.row === 3,
            },
            {
                'col-start-1': image.col === 1,
                'col-start-2': image.col === 2,
                'col-start-3': image.col === 3,
            },
        )" />
    </div>
</template>

clsx kullanmadan da şöyle bir çözüm mevcut:

JSX:

<div class="grid grid-cols-3 grid-rows-3 size-auto gap-2 rounded-xl bg-green-900 p-1">
    <img v-for="image in images" :src="image.source" :class="`rounded-lg
        ${image.row === 1 ? ' row-start-1' : image.row === 2 ? ' row-start-2' : ' row-start-3'}
        ${image.col === 1 ? ' col-start-1' : image.col === 2 ? ' col-start-2' : ' col-start-3'}
    `" />
</div>

Kütüphane, daha karmaşık durumlarda anlaşılırlığı koruyabilmeyi sağlıyor. Sevdiğim bir araç.

Baklava Ordusu · 7 Haziran 2024

brkdnmz dedi:
Tailwind, dinamik olarak oluşturulan sınıfları desteklemiyor maalesef. Sınıflar çıktıda yer alıyor olsa bile etkisiz kaldıklarını gözlemleyebilirsiniz "Styles" kısmından. "Olsa aşırı iyi olurdu." dediğim özelliklerden ama durum bu... Zamanında benim de çok kafam karışmıştı.

Bunun üstesinden gelmek için çeşitli yollar var, ben clsx kütüphanesiyle bir örnek vereyim:

JSX:

import clsx from "clsx"; // ... <template> <div class="grid grid-cols-3 grid-rows-3 size-auto gap-2 rounded-xl bg-green-900 p-1"> <img v-for="image in images" :src="image.source" :class="clsx('rounded-lg', { 'row-start-1': image.row === 1, 'row-start-2': image.row === 2, 'row-start-3': image.row === 3, }, { 'col-start-1': image.col === 1, 'col-start-2': image.col === 2, 'col-start-3': image.col === 3, }, )" /> </div> </template>

clsx kullanmadan da şöyle bir çözüm mevcut:

JSX:

<div class="grid grid-cols-3 grid-rows-3 size-auto gap-2 rounded-xl bg-green-900 p-1"> <img v-for="image in images" :src="image.source" :class="`rounded-lg ${image.row === 1 ? ' row-start-1' : image.row === 2 ? ' row-start-2' : ' row-start-3'} ${image.col === 1 ? ' col-start-1' : image.col === 2 ? ' col-start-2' : ' col-start-3'} `" /> </div>

Kütüphane, daha karmaşık durumlarda anlaşılırlığı koruyabilmeyi sağlıyor. Sevdiğim bir araç.

Hocam çok sağ olun. Bir baş ağrısından kurtardınız.

Çözüm olarak raporladım.

Çözüldü JavaScript Yazılan kod ile sonuç uyuşmuyor

Ayrıntılı düzenleme

Baklava Ordusu

Decapat

Dosya Ekleri

brkdnmz

brkdnmz

Megapat

Baklava Ordusu

Decapat

Benzer konular