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

Posted 2023-02-22

【中文标题】尽管有不同的调用，vue 组件的一部分永远不会改变

【英文标题】：part of vue component never change despite different call

【发布时间】：2021-03-07 01:23:17

【问题描述】：

我很想制作一个显示图像的 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 中，我将此组件称为 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>

我已经测试过了，所有的路径都可以正常工作。如果我在我需要imgmodal的位置将imgsrc作为src，它可以正常工作。无论我把 imgmodal 放在哪里（如果我改变它的名字）什么都没有改变

【参考方案1】：

在您的图片上，添加key 参数

<b-img fluid :src="imgmodal" :key="imgmodal"></b-img>

在doc

在没有键的情况下，Vue 使用了一种最小化元素移动的算法 并尝试就地修补/重用相同类型的元素 可能的。使用键，它将根据顺序重新排序元素 键的变化，并且键不再存在的元素将 总是被删除/销毁/更新

感谢key，你在modal中的img会更新。

【讨论】：

我只是添加了密钥，但它并没有改变任何东西，即使在重建之后也是如此

【参考方案2】：

嗯，Henri 的回复给了我大部分答案，因为确实 vue 只创建了一个 modal 并且每次都重用它，但是 key 对我没有任何作用。所以我只需要在我的模式中添加和:id="somethingunique，以便单独对待它们