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 的新手，所以也许错误很容易看到，但我不知道为什么没有工作。

所以问题是：为什么当我点击按钮时无法启动甜蜜警报模式？

Answer 1

尝试@click而不是@submit

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

Answer 2

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

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