有没有一种方法可以使用 @click (v-on:click) 打开一个模式，同时关闭第二个模式（已经打开？）

Question

我希望它关闭一个名为 confirmationModal 的模式和另一个名为 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>

Answer 1

您可以通过以下方式实现：

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

有没有一种方法可以使用 @click (v-on:click) 打开一个模式，同时关闭第二个模式（已经打开？）

Is there a way to use @click (v-on:click) to open one modal, while simultaneously closing a second one (that is already open?)

javascript

event-handling

vue.js