尝试制作显示图像的Vue组件,然后打开其中包含第二个图像的模态,然后显示第三个图像代替第一个图像。第一张和第三张图片可以按预期工作,但模态中的一个永远不会更新。它重用提供给页面中调用的第一个组件的第一个图像。我不知道它怎么能每次都重复使用此图像,因为它们是不同的
<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>
我的道具原型如下
props : {
imgmodal: String,
imgsrc: String,
imgend: String,
date: String,
currentdate: String,
}
在我的app.vue中,我将此组件称为以下组件。
<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>
我已经测试过,并且所有路径都可以正常工作。如果我将imgsrc
src放在需要的位置imgmodal
,它可以正常工作。无论我将imgmodal放在哪里(如果我更改它的名称),都不会改变
好吧,Henri的回答给了我大部分答案,因为vue确实只创建了一个模态并每次都重复使用,但是键对我没有任何作用。所以我只需要添加和添加:id="somethingunique
到我的模态中,以便对它们进行单独处理
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句