尽管调用不同,但vue组件的一部分永远不会改变

s

尝试制作显示图像的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">&times;</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>

我已经测试过,并且所有路径都可以正常工作。如果我将imgsrcsrc放在需要的位置imgmodal,它可以正常工作。无论我将imgmodal放在哪里(如果我更改它的名称),都不会改变

s

好吧,Henri的回答给了我大部分答案,因为vue确实只创建了一个模态并每次都重复使用,但是键对我没有任何作用。所以我只需要添加和添加:id="somethingunique到我的模态中,以便对它们进行单独处理

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

JWT令牌的哪一部分对用户来说是唯一的,并且不会改变?

R markdown使用不同的参数重新运行报告的同一部分

您可以用不同的语言整理文件的一部分吗?

如何改变场景一部分的色调?

调用作为 ngFor 一部分的子组件的函数

Vue.js使用计算属性显示或隐藏组件的一部分

Vue:将软件包的一部分注册为组件

是否可以仅导入vue组件的一部分?

如何下载 React 组件的一部分?

使用 VUE - 即使只有一部分不同,HTML 是否也会更新?

调用主窗体的一部分

是否可以使ASP.NET页面使用不同的DOCTYPE呈现页面的一部分?

在XLS或CSV文件中用不同的颜色写入单元格的一部分

Pyspark - 用不同的字符替换字符串的一部分(字符数不均匀)

ScriptBuffer 在作为循环的一部分从事件调用时抛出 NullReferenceException - SSIS 脚本组件

如何在不丢失样式的情况下打印Vue组件的一部分

在Vue.js中返回组件的输出作为方法的HTML响应的一部分

尽管使用了Selenium WebDriver,但只解析了页面的一部分

从另一个组件重新渲染组件的一部分

改变图片中一部分的颜色

循环更改变量名称的一部分并重复该命令

将页面分为两部分,以便我们可以用不同的来源填充每一部分

尽管我已经在模块中声明了该组件,但它不是任何NgModule的一部分

让子组件知道它是父组件Angular的FormGroup的一部分

如何在组件B中呈现组件A的一部分

如何在pandas数据框中创建新列,并用不同的方式替换每一行中的一部分字符串?

Classloader是JVM的一部分还是JRE的一部分?

取弦的一部分,并与另一部分

拆分一个传单图的代码(这样,一部分的输入更新不会影响代码的另一部分)