Vue - 无法在方法内部调用 sweetalert2

Question

我在 vue 方法中启动 sweetalert 时遇到问题。如果我直接在脚本中调用 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 的新手，所以错误可能很容易看到，但我不知道为什么不起作用。

所以问题是：为什么我单击按钮时无法启动 sweetalert 模式？

Answer 1

Try @click instead of @submit

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

Answer 2

正如你在 vuetify 文档中看到的，按钮的事件是点击，所以你必须使用 @click 而不是 @submit，这是一个基本的工作示例：

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

Vue - 无法在方法内部调用 sweetalert2

Vue - Can´t call sweetalert2 inside method

vue.js

sweetalert2