vue не обновляет внешний вид компонента даже после внесения изменений в данные

#javascript #html #vue.js #bootstrap-4

#javascript #HTML #vue.js #bootstrap-4

Вопрос:

итак, у меня возникла проблема с одним из моих компонентов vue. моя цель — иметь одно изображение, которое отображается по умолчанию, и после нажатия на него выполнить какое-либо другое действие, и предполагается, что оно изменится

  <b-img v-else-if="isopen = true"  fluid src="someimage" data-toggle="modal" data-target=".bd-example-modal-lg" @click="opening()"></b-img>
 <b-img v-else-if="isopen = false" fluid src="someotherimage" data-toggle="modal" data-target=".bd-example-modal-lg"></b-img>
  

и есть часть сценария

     data () {
return {
  isopen: false,

}

    opening(){
//this function is called as intended
      console.log(this.isopen  'opening');
      this.isopen = false;
      console.log(this.isopen)
    }
  

все в моем коде работает нормально, так как приглашение отладки показывает, что состояние isopen изменяется так, как я этого хочу, но оно не обновляет отображаемое изображение. почему он не обновляется сам?

Ответ №1:

В условиях есть опечатка. Это должно быть:

 v-else-if="isopen == true"
v-else-if="isopen == false"
  

или просто

 v-else-if="isopen"
v-else-if="!isopen"