part of vue component never change despite different call

Viewed 83

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">&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>

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

2 Answers

On your image, add a key parameter

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

In the doc

Without keys, Vue uses an algorithm that minimizes element movement and tries to patch/reuse elements of the same type in-place as much as possible. With keys, it will reorder elements based on the order change of keys, and elements with keys that are no longer present will always be removed/destroyed/updated

Thanks to the key, your img in the modal will be updated.

Well, Henri response gave me most of the answer, as indeed vue only created one modal and reused it each time, but the key did nothing to me. So i just had to add and :id="somethingunique to my modal in order for them to be treated individually

Related