Untitled

<script setup>
  import modal from './modal.vue';
</script>
<template>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
    <section id="Portofolio">
      <div class="container-fluid my-4">
        <div class="row justify-content-center">
          <div class="kotak col-lg-10 col-md-12 spacer spacer-mt">
            <div class="row my-5 text-center title">
              <h2>My Success Project</h2>
            </div>
            <div class="row gx-1 justify-content-center my-5 p-3">

              <div v-for="item in items" :key="item.id" class="col-lg-3 col-md-4 col-6 my-2 text-center">
                <modal :id="item.id" :konten="item.konten"/>
                <div class="box-item rounded-3" data-bs-toggle="modal" data-bs-target="#portofolio-modal">
                  <img class="img-fluid mb-2" src="../assets/img/file.png" alt="">
                  <p>absensi sekolah</p>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </section>

    
</template>

<script>
export default{
    data() {
      return {
          items: [
            {id :1, konten: "ini modal 1"},
            {id :2, konten: "ini modal 2"},
            {id :3, konten: "ini modal 3"},
            {id :4, konten: "ini modal 4"},
            {id :5, konten: "ini modal 5"},
            {id :6, konten: "ini modal 6"},
          ]
      }
      
    }
}

</script>