Блог

я пытаюсь создать компонент 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">amp;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>
 

я уже протестировал, и весь путь работает правильно. если я указываю imgsrc как src в том месте, где мне нужно imgmodal быть, это работает без проблем. где, как независимо от того, куда я помещаю imgmodal (и если я изменю его имя), ничего не изменится

На вашем изображении добавьте key параметр

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

В документе

Без ключей Vue использует алгоритм, который минимизирует перемещение элементов и пытается как можно больше исправлять / повторно использовать элементы одного и того же типа на месте. С помощью keys он будет изменять порядок элементов на основе изменения порядка ключей, а элементы с ключами, которых больше нет, всегда будут удалены / уничтожены / обновлены

Благодаря ключу ваш img в модальном будет обновлен.

Ну, ответ Анри дал мне большую часть ответа, так как на самом деле vue создавал только один модальный и повторно использовал его каждый раз, но ключ ничего не сделал для меня. Поэтому мне просто нужно было добавить и :id="somethingunique в мой модальный, чтобы их можно было обрабатывать индивидуально