im tyring to make a vue component that display an image, then open a modal with a second image in it and then afterward display a third image in place of the first. the first and third image work as intended, but the one in the modal never update. it reuse the first image given to the first component called in the page. i don't see how it can even reuse this image each time, as those are different
<b-img v-if="currentdate >= date" fluid :src="imgsrc"></b-img>
<b-img v-else-if="isopen == false" fluid :src="imgsrc" data-toggle="modal" data-target=".bd-example-modal-lg" @click="opening()"></b-img>
<b-img v-else-if="isopen == true" fluid :src="imgend" data-toggle="modal" data-target=".bd-example-modal-lg"></b-img>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Conseil du jour </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<b-img fluid :src="imgmodal"></b-img>
</div>
<div class="modal-footer align-content-center">
<audio controls >
<source src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_1MG.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>
</div>
</div>
</div>
my props are prototyped as folow
props : {
imgmodal: String,
imgsrc: String,
imgend: String,
date: String,
currentdate: String,
}
and in my app.vue i call this component as folow.
<div class="container">
<b-row class=" justify-content-md-center padding-0 no-gutters p-0 m-0">
<b-col class="padding-0" >
<numero imgsrc="/path1"
imgend="/pathe2"
imgmodal="/path3" date="30"></numero>
</b-col>
</-brow>
<b-row class=" justify-content-md-center padding-0 no-gutters p-0 m-
<b-col class="padding-0" >
<numero imgsrc="/path1bis"
imgend="/pathe2bis"
imgmodal="/path3bis" date="28"></numero>
</b-col>
i already tested, and all of the path work properly. if i give imgsrc as src in the emplacement where i need imgmodalto be, it work without problem. where as no matter where i put imgmodal (and if i change it's name) nothing change