I am dealing with 2 components: TestSearchTool and TestModal. My goal is to display the Modal when a button in the TestSearchTool component is clicked. These two components are siblings in the hierarchy, so I am struggling to pass values between them (even though Vuex is an option, I prefer a solution without it). I am utilizing Bootstrap 5 and Vue 3 for this task since Bootstrap Vue does not function with Vue 3.
Below is the code for my TestModal component:
<template>
<div>
<div class="modal fade" ref="exampleModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" @click="modal.hide()" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" @click="modal.hide()">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { Modal } from 'bootstrap'
export default {
name: "App",
data: () => ({
modal: null
}),
mounted() {
this.modal = new Modal(this.$refs.exampleModal)
}
};
</script>The following code snippet shows my TestSearchTool component:
<template>
<div>
<div class="container ml-5 mt-3 border-1 rounded pl-5 pt-5 pr-5">
<div class="row mb-4">
<div class="col-md-6 mb-4" >
<label for="test" class="label-form">Titre</label>
<input autocomplete="off" placeholder="Rechercher par le titre du test" v-model="testName" type="text" id="test" class="form-control">
</div>
<div class="col-md-6 mb-4">
<label for="candidat" class="label-form">Candidat</label>
<select v-model="CandidateName" class="form-select" id="candidat">
<option value="" selected>Tous les candidats</option>
</select>
</div>
</div>
<div class="row">
<div class="col-12 mb-3">
<div class="col-12 mb-4">
<div class="col-sm-6 col-12 d-inline-block">
<!-- Modal is shown on this button's click !-->
<button type="button" @click="this.$emit('clickDone')" class=" btn btn-primary col-12 col-sm-11 mb-sm-0 mb-sm-0 mb-4 float-sm-left"><i class="fa-solid fa-file-circle-plus"></i> Ajouter Un Test</button>
</div>
<div class="col-sm-6 col-12 d-inline-block">
<button @click="deleteTests" type="button" class=" btn btn-primary col-sm-12 col-12" v-if="false"><i class="fa-solid fa-file-circle-minus"></i> Supprimer Le(s) Test(s)</button>
</div>
</div>
<button id="searchTest" @click="searchBy" class="col-12 btn btn-primary" ><i class="fas fa-search"></i> Rechercher</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
components:{
},
data(){
return {
testName:'',
CandidateName:'',
show:false,
}
},
methods:{
},
}
</script>
<style scoped>
</style>
Lastly, here is the parent component named "Tests":
<template>
<div>
<test-search-tool></test-search-tool>
<test-modal></test-modal>
</div>
</template>
<script>
import TestSearchTool from "../components/TestSearchTool.vue"
import TestModal from "../components/TestModal.vue"
export default {
components : {
DashboardNavbar,
TestSearchTool,
TestModal,
},
mounted(){
document.body.style.backgroundImage='url("")';
document.body.style.background="white";
}
}
</script>
<style>
</style>