Passing dynamic data to bootstrap's modal by props in VueJS

Question

I'm working on a small personal project and I'm have a small problem with bootstrap modal. I have a list of projects (everyone inside of a card) and i want to show details every time I click on a card. But no matter which card I click I always get same values inside of a modal (from the first project). Here is my code

App.vue

<template>
  <div>
    <Navbar />
    <Projects />
  </div>
</template>
 
<script>
import Navbar from "./components/Navbar.vue";
import Projects from "./components/projects/Projects.vue";
 
export default {
  name: "App",
  components: { Navbar, Projects },
};
</script>

Projects.vue

<template>
  <div class="projects bg-light" id="projects_title">
    <h1>Projects</h1>
    <div class="projects_cards">
      <div v-for="project in projects" class="single_project" :key="project.id">
        <SingleProject :project="project"/>
          <Modal :project="project" />
      </div>
    </div>
  </div>
</template>
 
<script>
import SingleProject from "./SingleProject.vue";
import Modal from "../Modal.vue";
export default {
  data() {
    return {
      projects: [
        {
          id: "1",
          number: "III",
          title:
            "Title 4",
        },
        {
          id: "2",
          number: "IV",
          title: "Title 4",
        },
      ],
    };
  },
  components: {
    SingleProject,
    Modal,
  },
};
</script>

SingleProject.vue

<template>
  <div class="card mx-2" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">  {‌{project.number}} </h5>
    <h6 class="card-subtitle mb-2 text-muted">{‌{project.title}}</h6>
    <p class="card-text">Some quick example text</p>
    <a class="card-link" data-toggle="modal" data-target="#exampleModal">Project Card</a>
  </div>
</div>
</template>
 
<script>
export default {
  props: {project : {
    type: Object
  }},
}
</script>

Modal.vue

<template>
  <div>
    <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">
            <h5 class="modal-title" id="exampleModalLabel">{‌{project.id}}</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            {‌{project.title}}
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
            >
              Close
            </button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  props: {
    project: {
      type: Object,
    },
  },
};
</script>

Inside the props everything seams to be ok.

Answer 1

For me it's this line the problem :

<a class="card-link" data-toggle="modal" data-target="#exampleModal">Project Card</a>

The data-target triger #exampleModal which is an id, and all your modals have the same id, so the you'll get strange behaviors like this.

You have different way to handle it, like using @click event would be better, but you ahve a lot of refactor to do.

A small fix could be like this:

Modal.vue

:id="'exampleModal-' + project.id"

Single Project.vue

<a class="card-link" data-toggle="modal" :data-target="'#exampleModal-' + project.id">Project Card</a>

To be sure, update all the id with the formatted value.

Let me know how it goes and cheers