modals gist

gistfile1.txt

|-----------------|
| Home.vue:       |
|-----------------|
<script setup>
import PostComponent from '../components/Post/PostComponent.vue';

</script>

<template>
  <main class="container">
    <PostComponent />
  </main>
</template>


|--------------------|
| PostComponent.vue: |
|--------------------|
<script setup>
import { storeToRefs } from 'pinia';
import { ref } from 'vue';

import { usePostStore } from '@/stores/post';
import PostDetail from './PostDetail.vue';

const { posts, loading, error } = storeToRefs(usePostStore());
const { fetchPosts } = usePostStore();
const selectedPostId = ref(null);
fetchPosts();

const selectPost = (postId) => {
  selectedPostId.value = postId;
};
</script>

<template>
  <main>
    <!-- Button trigger modal -->
    <button
      type="button"
      class="btn btn-primary modal__button"
      data-bs-toggle="modal"
      data-bs-target="#postModal">
      Posts modal
    </button>

    <!-- Modal -->
    <div
      class="modal fade"
      id="postModal"
      tabindex="-1"
      aria-labelledby="postModalLabel"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-header">
            <h1
              class="modal-title fs-5"
              id="postModalLabel">
              posts modal
            </h1>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close" />
          </div>
          <div class="modal-body">
            <p v-if="error">
              {{ error }}
            </p>
            <p v-if="loading">
              Loading posts...
            </p>
            <div
              v-for="post in posts"
              :key="post.id">
              <h4 @click="selectPost(post.id)">
                {{ post.title }}
              </h4>
              <p>{{ post.body }}</p>
              <p>user id: {{ post.userId }}</p>
              <hr>
            </div>
          </div>

          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal">
              Close
            </button>
            <button
              type="submit"
              class="btn btn-primary">
              Save changes
            </button>
          </div>
        </div>
      </div>
    </div>

    <PostDetail
      v-if="selectedPostId !== null"
      :post-id="selectedPostId"
      @close="selectPost(null)" />
  </main>
</template>


|-----------------|
| PostDetail.vue: |
|-----------------|
<script setup>
import { storeToRefs } from 'pinia';
import { usePostStore } from '@/stores/post';
import { defineProps } from 'vue';

const props = defineProps(['id']);

const { post, loading, error } = storeToRefs(usePostStore());
const { fetchPost } = usePostStore();

fetchPost(props.id);

</script>

<template>
  <main>
    <!-- Button trigger modal -->
    <button
      type="button"
      class="btn btn-primary modal__button"
      data-bs-toggle="modal"
      data-bs-target="#postModal">
      Posts modal
    </button>

    <!-- Modal -->
    <div
      class="modal fade"
      id="postModal"
      tabindex="-1"
      aria-labelledby="postModalLabel"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-header">
            <h1
              class="modal-title fs-5"
              id="postModalLabel">
              posts modal
            </h1>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close" />
          </div>
          <div class="modal-body">
            <p v-if="error">
              {{ error }}
            </p>
            <p v-if="loading">
              Loading posts...
            </p>
            <div v-if="post">
              <p>{{ post.title }}</p>
              <p>{{ post.body }}</p>
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-secondary"
            data-bs-dismiss="modal">
            Close
          </button>
          <button
            type="submit"
            class="btn btn-primary">
            Save changes
          </button>
        </div>
      </div>
    </div>
  </main>
</template>