How to use it with vue-justified-layout

[kgnfth]

How to use it with vue-justified-layout

i tried to implent the basic one but i am getting the following error

Cannot read property 'match' of undefined
disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.

<template>
  <div class="container pt-12 mx-auto max-w-7xl">
    <div class="flex items-end justify-between mb-12 header">
      <p class="mb-4 text-4xl font-bold text-gray-800">{{ album.title }}</p>
    </div>
    <div v-for="photo in album.photos" :key="photo.id">
      <CoolLightBox
        :items="photo.image"
        :index="imageIndex"
        @close="imageIndex = null"
      >
      </CoolLightBox>
      <vue-justified-layout
        v-slot="{ item, index }"
        :items="photo.image"
        :options="justifiedOptions"
      >
        <img
          :key="index"
          class="hover:opacity-75"
          :src="getStrapiMedia(item.url)"
          @click="imageIndex = index"
        />
      </vue-justified-layout>
    </div>
  </div>
</template>

<script>
import { getStrapiMedia } from '../../utils/medias'
export default {
  async asyncData({ $strapi, params }) {
    const matchingAlbums = await $strapi.find('albums', {
      slug: params.slug,
    })
    return {
      album: matchingAlbums[0],
      imageIndex: null,
    }
  },
  data() {
    return {
      justifiedOptions: {},
    }
  },
  methods: {
    getStrapiMedia,
  },
}
</script>

this is the original code

<template>
  <div class="container pt-12 mx-auto max-w-7xl">
    <div class="flex items-end justify-between mb-12 header">
      <p class="mb-4 text-4xl font-bold text-gray-800">{{ album.title }}</p>
    </div>
    <div v-for="photo in album.photos" :key="photo.id">
      <vue-justified-layout
        v-slot="{ item }"
        :items="photo.image"
        :options="justifiedOptions"
      >
        <img class="hover:opacity-75" :src="getStrapiMedia(item.url)" />
      </vue-justified-layout>
    </div>
  </div>
</template>

<script>
import { getStrapiMedia } from '../../utils/medias'
export default {
  async asyncData({ $strapi, params }) {
    const matchingAlbums = await $strapi.find('albums', {
      slug: params.slug,
    })
    return {
      album: matchingAlbums[0],
    }
  },
  data() {
    return {
      justifiedOptions: {},
    }
  },
  methods: {
    getStrapiMedia,
  },
}
</script>

[kgnfth]

i made it work now this is the working code

<template>
  <div class="container pt-12 mx-auto max-w-7xl">
    <div class="flex items-end justify-between mb-12 header">
      <p class="mb-4 text-4xl font-bold text-gray-800">{{ album.title }}</p>
    </div>
    <CoolLightBox
      :items="images"
      :index="imageIndex"
      @close="imageIndex = null"
    >
    </CoolLightBox>

    <div v-for="photo in album.photos" :key="photo.id">
      <vue-justified-layout
        v-slot="{ item, index }"
        :items="photo.image"
        :options="justifiedOptions"
      >
        <img
          :key="index"
          class="cursor-pointer hover:opacity-75"
          :src="getStrapiMedia(item.url)"
          @click="imageIndex = index"
        />
      </vue-justified-layout>
    </div>
  </div>
</template>

<script>
import { getStrapiMedia } from '../../utils/medias'
export default {
  async asyncData({ $strapi, params }) {
    const matchingAlbums = await $strapi.find('albums', {
      slug: params.slug,
    })

    const images = []

    matchingAlbums[0].photos[0].image.map((item) =>
      images.push(getStrapiMedia(`${item.url}`))
    )

    return {
      images,
      album: matchingAlbums[0],
      imageIndex: null,
    }
  },
  data() {
    return {
      justifiedOptions: {
        targetRowHeight: 105,
        boxSpacing: 2,
      },
    }
  },
  methods: {
    getStrapiMedia,
  },
}
</script>