Vue - Невозможно вызвать sweetalert2 внутри метода

Question

У меня проблема с запуском подсластителя внутри vue методов. Если я вызываю Sweetalert непосредственно в сценарии, работает, но когда я хочу запустить Sweetalert, при нажатии кнопки ничего не происходит (никаких ошибок в консоли). Код выглядит

Vue (Vuetify)

 <v-card-actions>
                <v-btn block dark @submit="submit()">Entrar</v-btn>
              </v-card-actions>

Эта работа

 <script>
    Swal.fire({
      title: "Error!",
      text: "Do you want to continue",
      icon: "error",
      confirmButtonText: "Cool"
    });

  </script>

Не работает

 <script>
    export default {
      data() {
        return {
          value: String,
          name: "",
          password: ""
        };
      },
      methods: {
        submit() {
          Swal.fire({
            title: "Error!",
            text: "Do you want to continue",
            icon: "error",
            confirmButtonText: "Cool"
          });
        }
      }
    };
    </script>

Я новичок в Vue так что, возможно, ошибку легко увидеть, но я не знаю, почему ничего не работает.

Так что вопрос: почему не удается запустить модальный подсластитель, когда я нажимаю кнопку?

Answer 1

Как вы можете видеть в документации vuetify, событие для кнопки - щелчок, поэтому вы должны использовать @click вместо @submit, вот базовый c рабочий пример:

https://codesandbox.io/s/elegant-shadow-p0dkh

Answer 2

Попробуйте @click вместо @submit

<v-btn block dark @click="submit()">Entrar</v-btn>