Olá,

Estou tendo um problema com o Vue.js 3. Criei um modal, fazendo uso de bootstrap (não o BootstrapVue, pois não funciona em Vue.js 3) e, há o seguinte trecho:

<div class="alert alert-danger" role="alert" v-if="errors.length">
                <ul>
                  <li v-for="(error, index) in errors" :key="index">
                    {{ error }}
                  </li>
                </ul>
              </div>
            </div>

            <div class="modal-footer">
              <button
                type="button"
                class="btn btn-secondary btn-cancel"
                data-bs-dismiss="modal"
                @click="resetModalRecorrence"
              >
                Cancelar
              </button>
              <button
                type="button"
                class="btn btn-primary btn-ok"
                data-bs-dismiss="modal"
                @click.prevent="validateRecorrence"
                :disabled="recorrenceConfirmDisabled"
              >
                Confirmar
              </button>

E no método "validateRecorrence", há o seguinte trecho:

 if (!this.checkModalRecorrence(rangeDates)) {
          return;
        }

        this.$nextTick(() => {...

No entanto, quando cai nesse "return", o modal é fechado e a ideia era de impedir o modal de fechar caso ocorra algum erro na validação, para que a mensagem de erro apareça para o usuário e ele possa corrigir os valores dos inputs.

Podem me ajudar? Desde já agradeço!