I'm currently working on a personal project and encountering an issue with the bootstrap modal. My project involves a list of projects, each one contained within a card element. The problem arises when I attempt to display details for each project by clicking on a card - regardless of which card I click, the modal always shows the same values (from the first project). Here is a snippet of 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">×</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>
The props seem to be correctly set up.