Есть ли способ использовать @click (v-on: click), чтобы открыть один модал, одновременно закрывая второй (который уже открыт?) - PullRequest
Новая
       6

Есть ли способ использовать @click (v-on: click), чтобы открыть один модал, одновременно закрывая второй (который уже открыт?)

0 голосов
/ 20 февраля 2020

Я хочу, чтобы это закрыло модальное имя с подтверждением, а другое с именем showModal. Я думал о том, чтобы сделать это из события нажатия, или, возможно, написать простой метод if / else, но, похоже, ничего не работает 

    <div v-if="showModal">
      <transition name="modal">
        <div class="modal-mask">
          <div class="modal-wrapper">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" @click="showModal = false">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                <div class="modal_header_text">Are you Sure?</div>
                <img class="redeem_image" src="https://www.fillmurray.com/g/460/420" alt="people"/>
                <div class="modal_redeem_text">Redeem for Flyaway?</div>
                </div>
                <div class="modal-footer">
                  <button type="button" id="reclamation_btn" class="btn btn-primary" @click="confirmationModal = true">Redeem</button>
                  <button type="button" id="close_btn" class="btn btn-secondary" @click="showModal = false">Cancel</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
    <div v-if="confirmationModal">
      <transition name="modal">
        <div class="modal-mask">
          <div class="modal-wrapper">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" @click="confirmationModal = false">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                <img class="redeem_image" src="https://www.fillmurray.com/g/460/420" alt="people"/>
                </div>
                <div class="modal-footer">
                  <button type="button" id="final_reclamation_btn" class="btn btn-primary" @click="confirmationModal = false">Redeem</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>

1 Ответ

1 голос
/ 21 февраля 2020

Вы можете достичь этого следующим образом:

@click="confirmationModal=false;showModal=true"

...