Vue-不能调用Sweetalert2内部方法

Question

我在vue方法中启动Sweatrep时遇到问题。如果我直接在脚本中调用Sweatrep，但当我想在单击按钮时启动Sweatrep时不会发生任何事情（控制台中没有错误）。代码看起来

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

正如您在vuetify留档中看到的，按钮的事件是单击，因此您必须使用@Click而不是@提交，这是一个基本的工作示例：

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

Answer 2

尝试点击@而不是@submit

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