让我的swal fire错误在vue中显示
在Vue中显示swal fire错误，可以通过以下步骤实现：
- 首先，确保你已经安装了SweetAlert2库。可以通过以下命令来安装：
npm install sweetalert2- 在你的Vue组件中，导入SweetAlert2库：
import Swal from 'sweetalert2'- 在需要显示错误的地方，使用以下代码来触发SweetAlert2的错误提示框：
Swal.fire({
icon: 'error',
title: 'Oops...',
text: '发生了一个错误！'
})这段代码将会显示一个带有错误图标、标题和文本的SweetAlert2错误提示框。
对于这个问题，腾讯云没有直接相关的产品或链接地址。然而，腾讯云提供了一系列云计算服务，如云服务器、云数据库、云存储等，可以帮助开发者构建和部署应用程序。你可以通过访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于腾讯云的信息和产品。
相关·内容
在我的Vue组件里面。我有一个显示sweetalert2输入消息的方法(显示)。但是它在使用laravel (npm运行手表)后返回一个错误。
show(){
const { value: email } = await Swal.fire({
title: 'Input email address',
input: 'email',
inputPlaceholder: 'Enter your email address'
})
if (email) {
Swal.fire(&#
浏览 3提问于2019-11-11得票数 0
回答已采纳
我使用VueSweetalert2与Vue 3和Vuex 4。当我调用像这样的甜警报功能时
this.$swal.fire({
text: 'Success',
icon:'success',
})
甜警报附加1 div，每次在display:none css结束和身体标签关闭之前。我只想要一个div时，甜警报功能调用。下面是带有display:none css的大量div标记的图片。让我知道是否有任何清理功能或其他东西，我错过了。
这是我的完整代码。i在Vue 3中使用选项API而不是组合
this.$stor
浏览 9提问于2022-10-28得票数 0
1回答
我正在构建一个拦截器，以在我的Nuxt应用程序中处理来自Nuxt的错误，但是当我试图从axios插件调用vue-sweetalert2以显示错误消息时，它抛出了我的$swal is not a function。
我有一个警报插件并将其导入到nuxt.config中的plugins部分，我使用它从全局导入Sweet警报并处理全局加载程序，它在其他时刻工作，但在试图从axios调用它时不起作用：
//plugins/alerts.js
import Vue from 'vue'
// I remove the following two lines when I impor
浏览 24提问于2020-07-09得票数 0
这是file1.js中的Swal.Fire：
import TextModuleComponent from "../components/TextModuleComponent";
export default {
components: {TextModuleComponent}
}
Swal.fire({
title: 'Das Angebot per E-Mail versenden?',
html:
'<input class="swal2
浏览 4提问于2021-08-02得票数 1
回答已采纳
我正在创建一个laravel SPA，并使用vue.js作为框架。我在我的项目中添加了一个甜蜜的警告包，但是每当我使用toast函数时，它就会得到一个错误。我试过使用除toast.fire以外的其他函数，如swal.fire，它可以正常工作。有人能帮我一下吗？以下是我的一些代码。
app.js
require('./bootstrap');
import Vue from 'vue'
import { Form, HasError, AlertError } from 'vform'
import moment from 'moment
浏览 23提问于2019-07-31得票数 2
回答已采纳
我很难在vue方法中启动甜警报。如果我在脚本中直接调用甜味警报，但是当我想要在单击一个按钮时启动甜警报时，什么都不会发生(控制台中没有错误)。代码看起来
Vue (香精)
<v-card-actions>
<v-btn block dark @submit="submit()">Entrar</v-btn>
</v-card-actions>
这项工作
<script>
Swal.fire({
title: "Error!
浏览 5提问于2020-03-20得票数 1
回答已采纳
1回答
我有一个Laravel 8项目，安装了vue-甜警报2。我只想定义一次Toast行为，然后在我的组件中调用它。
到目前为止，我已经有了以下代码：
/js/components/Mypage.vue
<script>
export default {
data: function () {
return { ... };
},
mounted() { ... },
methods: {
myMethod: function () {
const Toast = this.$swal.mixin({
浏览 4提问于2021-12-24得票数 1
回答已采纳
1回答
当呈现到另一个组件时如何使v-if快速呈现？我有一些情况，当我要登录时，在我的nabvar component完成更改之后，我应该手动将它重新加载到我的客户端上以获得logout button，并且在删除时也是一样的，我应该手动重新加载--我已经把:key放在了那个组件上。
这是我的login.vue页面中的组件
goLogin() {
if (!this.input || !this.password) {
this.$swal.fire({
type: 'error',
text: `please enter your
浏览 5提问于2019-04-20得票数 0
回答已采纳
1回答
如何正确导入sweetalert2才能使用Swal？只想在这个文件中使用它。为什么<script src = "https://cdn.jsdelivr.net/npm/sweetalert2@9"> </script>不能像在官方网站上那样工作？ <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ax
浏览 4提问于2020-08-19得票数 0
回答已采纳
我有这个错误消息的代码： if ($this->form_validation->run() === false) {
$this->session->set_flashdata('error', validation_errors());
redirect($this->agent->referrer());
} 我在模板中显示如下错误： <?php if ($this->session->flashdata('error')): ?>
<script>
浏览 21提问于2021-07-09得票数 0
回答已采纳
例如，SweetAlert2 1
它可以与一行程序一起使用
Swal.fire('Any fool can use a computer')
但是，还有一个Vue JS2包装器，可以像这样调用它
<template>
<button @click="showAlert">Hello world</button>
</template>
<script>
export default {
methods: {
showAlert() {
// Use sweetalert2
浏览 0提问于2020-06-16得票数 0
2回答
我正在使用带有vuetify和vue.js的swal2 (sweetalert2)，在自定义swal弹出窗口的字体系列时遇到了麻烦。我已经用谷歌搜索过了，但只能找到swal ver.1，它与swal2有很大的不同。 <script>
import Swal from 'sweetalert2'
...
...
function fireNo(){
Swal.fire({
icon: 'warning',
title: 'titletext',
showCloseB
浏览 89提问于2021-09-01得票数 1
这是我的配置和配置。
1-自航站楼
npm install sweetalert2
2- in main.js
import Swal from 'sweetalert2'
window.swal = Swal;
Vue.use(Swal);
// Toast config
const toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
onOpen: (
浏览 5提问于2020-07-24得票数 0
我正在尝试创建一个sweetAlert2函数，在这里我想要启动一个加载屏幕。在加载屏幕期间，我想执行一些功能，这可能需要一些时间。之后，我想显示火灾的成功或错误，这取决于返回的是什么。我尝试了几种方法：
Swal.fire({
title: 'Auto close alert!',
html: 'In progress',
timerProgressBar: true,
didOpen: () => {
try {
浏览 8提问于2022-11-10得票数 0
回答已采纳
1回答
我正在创建一个laravel，我使用Vue.js作为前端。我遇到了这个错误，我不知道如何解决这个问题，因为我认为我的代码没有什么问题。我组件中的所有@click函数都可以工作，除了我的表编辑按钮中的editModal函数。有人能帮我吗？
Users.vue
<button class="btn btn-success" @click="newModal" data-toggle="modal" data-target="#addNew">
<table class="table table-hover
浏览 0提问于2019-07-31得票数 0
回答已采纳
我在一个甜蜜的警告中使用函数来测试ID是否是服务器端的.socket.emit()与的结合
我希望能够根据服务器返回的错误使用Swal.showValidationMessage("Some error") .
但是preConfirm函数只适用于承诺函数，这意味着使用.then().catch()...
我发现的唯一解决办法是一个丑陋的方法：
Swal.fire({
title: 'ID ?',
input: 'text',
showCancelButton: true,
confirmButtonText:'Go
浏览 3提问于2019-01-12得票数 0
回答已采纳
我是初学者网页开发人员。 我的第一个项目是due和laravel 8。 我的接口返回错误：{“message”：“给定数据无效。”，“error”：{“email”：“Taki email ju\u017c wyst\u0119puj.”，" login ":"Taki login ju\u017c wyst\u0119puje“}} 我有这样的代码： axios.post(this.$apiAdress + '/api/administrators?token=' + localStorage.getItem("api_token")
浏览 36提问于2021-11-02得票数 0
回答已采纳
当我点击文本时，我想使窗口显示为一个带有甜味警报(swal.fire)的窗口。如果语句和窗口提示在此库上如何工作？在此之后，您可以理解我是这个编程世界中的新手。
在此之后，我想为该输入指定一个值，并验证答案是否正确。
<td class="gases" title="Hidrógeno" id="H">H</td>，这是我想要单击的元素
Swal.fire({
title:'¿Cuál es el elemento?',
text: 'Introduce el nombre aquí',
i
浏览 9提问于2021-05-30得票数 2
回答已采纳
2回答
类型记录给了我toastMixin变量和动画对象中的两个错误。我没有找到解决这个问题的办法。
错误：
let toastMixin: typeof Swal
No overload matches this call.
Overload 1 of 2, '(options: SweetAlertOptions<any, any>): Promise<SweetAlertResult<any>>', gave the following error.
Argument of type '{ animation: boolea
浏览 15提问于2022-03-28得票数 1
我有两张桌子公司和员工
“关系公司”是父表，“员工”是子表。
现在，我需要从父表中删除记录，而父表又必须删除所有相关的子表。
怎么做？
它给了我下面的错误
消息：“模型App\Employee 2没有查询结果”
模态代码是：
public function up()
{
Schema::create('employees', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string(&#
浏览 1提问于2019-11-15得票数 0
回答已采纳
作为编码培训，现在我正在制作一个网页，您可以单击"Create“按钮，该按钮会触发一个弹出，在该按钮中，您应该填写6个数据输入，其输入方式不同，如文本、选择等(见下面的代码和附加图像)。
<template>
<v-btn class="create-button" color="yellow" @click="alertDisplay">Create</v-btn>
<br/>
<p>Test result of createCustomer:
浏览 1提问于2019-07-02得票数 0
回答已采纳
我将图像存储在firbase firestore上，将数据存储在集合上。我想检索vue应用程序上的图像数据，但我无法获得下载图像URL。如何从商店部分下载vue firestore的所有镜像？有了关系。例如，用户详细信息在收藏文件夹中，个人资料图片在商店部分。如何从商店区域下载头像只需用vuejs编写thr代码 我的sigle预览代码如下： vuejs，firestore store，vue-firestore实时 const user= fb.auth().currentUser;
return{
Profile:db.collection(&
浏览 19提问于2019-05-01得票数 0
3回答
我正在使用codeigniter和VueJs和甜警报javascript库进行小项目。但是，当我在VueJs方法中调用swall.fire({})时，我的控制台swall.fire({})中会出现一个错误。这是我的代码:
deleteCustomers(customer_id){
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning&
浏览 2提问于2019-11-16得票数 11
更具体地说，在VueJS运行或不正确的情况下，我如何总是从Laravel中得到一个答案？因为如果后端有错误，我在前面没有答案。
这就是我对Axios、VueJS和sweetalert2所做的事情：
axios.get('/usuarios').then(function(response){
if(response.data.estatus == 'si'){
Swal.fire('OK',response.data.mensaje,'success')
}else{
Swal.fire(
浏览 0提问于2019-07-18得票数 0
回答已采纳
我在脚本中使用了select2插件。如果在加载页面时执行警报，则会出现以下情况
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: '
浏览 4提问于2022-01-24得票数 1
1回答
我在Laravel中使用AJAX，并试图创建一个CRUD操作用于练习，在字段实际从数据库中删除之前，我使用甜警框来显示备注。SWAL alertbox会显示“你想删除吗”，如果用户点击“是”，这个字段应该被删除，否则什么都不会发生。在我的例子中，无论我单击什么，无论是“是”按钮还是“否”按钮，或者即使我在警告窗口之外单击，它都会从数据库中删除条目。下面是我的代码片段PS:我正在使用AXIOS向服务器发送请求 deleteUser(id) {
// Handles user deletion
Swal.fire({
title: 'Are
浏览 14提问于2020-04-25得票数 0
回答已采纳
我正在写一个网络项目，录制音频，并将其发送到后端服务器。 在用户完成记录后，我将使用SaveAlert2的Swal.fire()来显示成功消息，并获得完成此过程所需的用户输入(将创建的PDF的标题)。 当用户按下submit按钮时，会向服务器发送一个axios请求，这需要几秒钟的时间。 现在在我的代码中，当甜蜜警报的“提交”按钮被按下时，弹出窗口关闭，用户应该只是等待，而没有任何指示页面正在等待响应。 我的问题是:我如何更改弹出窗口的内容，让用户知道它使用sweetalert2的界面加载(或者如果有更好的方法这样做)？ Swal.fire()代码： const stopRecording =
浏览 19提问于2021-03-26得票数 0
我正在使用vue和laravel，我还在使用甜蜜的alert 2来显示我的错误消息，如果我的产品的状态是未批准或为空，我会尝试显示我的错误消息，但它没有显示，我的控制台也没有收到任何信息，但在我的网络选项卡中，错误正在显示。 以下是我的代码 <template>
<div>
<div class="row justify-content-center my-5">
<div class="col-md-6">
<div clas
浏览 19提问于2020-12-22得票数 0
回答已采纳
1回答
我有以下sweet alert 2消息： <button onclick='
Swal.fire({
title: "Select a page you want to be redirected:",
showDenyButton: true,
showCancelButton: true,
confirmButtonText: "Home",
denyButtonText: "About",
}).then((result) => {
浏览 17提问于2021-05-07得票数 1
回答已采纳
我的表与其他字段表(约束外键)有关系，所以当此删除按钮单击时。这将显示甜蜜的警报，数据不能删除，如果他们连接。
这是我的代码
<tbody>
<?php
$no = 1;
foreach ($data as $row){?>
<tr
浏览 7提问于2020-04-11得票数 0
回答已采纳
我试图为SweetAlert2编写自定义的HTML，我试图制作的代码让用户输入一个bot名称，然后将它提交给我们的API。
该代码在Windows上运行良好，但是当我在Chrome MacOS上这样做时，就会得到错误的Uncaught (in promise) TypeError: Cannot read properties of null (reading 'value')。占位符也没有在MacOS上注册，这在Chrome上都很好。
我认为这与HTML没有在Chrome上注册有关，因为我查看了开发人员控制台，发现它根本没有显示占位符或ID。
原始HTML：
<a c
浏览 8提问于2021-12-31得票数 1
基本上，每当出现错误、单个错误或成功消息时，我都会使用SweetAlert2发出祝酒词。
它似乎很好，直到我做了一个Redirect::route('auth.index')->with([...])，然后成功或错误/错误消息将不会触发。
我可以打开VueDevTools并确认错误/成功是可见的。
如果我使用错误/成功消息Redirect::back()->with([...])重定向回同一个页面，工作正常。
所有的工作，直到我想去另一个视图与闪光灯的消息。我错过了什么或者做错了什么？我一直在搜索和遍历惰性文档和vue文档，但是除了数据共享之外，找不到任何其他
浏览 4提问于2022-10-25得票数 0
1回答
我想在$ .get中向onget页面发送两个参数，但是这两个参数将被发送为空。我在$ .get中通过错误了吗？我的问题是，我是否在$ .get中正确地传递了这些参数？
function DeleteEpisode(episodeid) {
var corseid = document.getElementById("corseidfordelete").value;
Swal.fire({
title: 'delet؟',
showDenyButton: true,
confirmButtonText: 'yes',
denyButtonT
浏览 2提问于2021-12-04得票数 0
回答已采纳
1回答
我有两个不同的终点。一个是
sentPost: function() {
axios
.post("/article", {
title: this.title,
content: this.editorContent
}) // axios.<method>(url, {<data>})
.then(({ data }) => {
Swal.fire("Success!", "Article Posted!", "success");
浏览 4提问于2019-12-08得票数 1
回答已采纳
我对useState()有个问题。问题是，每当页面刷新userId没有值，因为我设置了它，但在我的代码中，我获得它的值。
const [userId, setUserId] = useState("");
function registerUser(e){
e.stopPropagation();
e.preventDefault();
if (isAdmin == "select permission" || isAdmin == null || isAdmin == undefined || isAdmin
浏览 5提问于2021-07-05得票数 0
回答已采纳
在版本9.0.0之前，我使用此代码完全禁用吐司警报中的动画。
Swal.fire({
animation : false,
toast: true,
....
});
现在使用版本9.*我尝试了这段代码，结果看起来是一样的。
Swal.fire({
showClass : { popup : "swal2-noanimation", backdrop : "swal2-noanimation", icon : "swal2-noanimation"},
//hideClass : { popup :
浏览 9提问于2019-11-08得票数 12
回答已采纳
1回答
如何更改Swal的确认按钮
、、、、
我正在使用Sweetalertjs，我编写了这个代码，用于向用户显示弹出消息：
$(document).ready(function(){
let popup_shown = false;
let cookies = document.cookie.split('; ');
for( let i=0; i<cookies.length; i++ ){
cookie = cookies[i].split('=');
if(
浏览 2提问于2021-11-08得票数 0
回答已采纳
我对一个jQuery ajax调用有一个问题。如果我注释掉ajax调用，它就是works。它正在通过所有的验证，然后转到其他有ajax调用的地方。如果我通过注释ajax调用来发出一些警告，它就可以正常工作并显示警报。
控制台中的错误:未指定的RangeError:超过了最大调用堆栈大小。
function submit() {
var companyname = $('#companyname').val();
var fname = $('#fname').val();
var username = $('#email').val(
浏览 2提问于2020-12-21得票数 1
回答已采纳
1回答
要求:用户不能在输入框中键入超过20个字符。
我已经实现了甜警报，以显示信息在我的角度项目。
一旦我们点击一个按钮，就会显示一个带有输入类型密码的甜蜜警报(弹出)。
我需要限制密码输入的最大长度为20。
当用户键入不超过20个字符，然后对其进行限制时，就会发生这种情况。
Swal.fire({
title: "Delete My Account",
text: "Please enter your password to delete your account",
input: 'password',
allowO
浏览 9提问于2022-06-30得票数 0
2回答
第二个警报显示我甚至在第一个警报中单击了取消按钮。如果我单击取消按钮，我希望关闭警报 $('#tblUser tbody').on('click','.reset',function(){
Swal.fire({
title: 'Reset password?',
text: "",
icon: 'question',
showCancelButton: true,
confirmB
浏览 48提问于2020-07-15得票数 0
我有一个来自Sweetalert2的范围输入，它显示了从50到4000的多个值，在这种情况下，我想将用户输入的值与条件中已经设置的值进行比较，以便代码用它需要的值向用户显示一个警告。该代码只有在确认用户选择的高度时才起作用。 <script>
Swal.queue([{
title: 'Hemoglobine/Height Simple Calculator',
confirmButtonText: 'Next →',
showCancelButton: true,
text: 'what is t
浏览 8提问于2020-10-11得票数 0
我在删除函数中使用Sweet警报2。代码工作正常，收到警报，但当我单击警报的删除按钮时，我在控制台中得到一个错误。单击“取消”按钮时未得到此错误。我是第一次使用这个，所以我不知道为什么会有这个错误。
甜警报2 ->
误差->
Uncaught :不能将类作为函数调用
我的js函数->
function onDelete(){
swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!&#
浏览 2提问于2020-12-10得票数 1
我试图在我的角度项目中包括sweetalert2，但是它会给出编译时的错误。错误/src/app/pages/signup/signup.component.ts:29:16-25 -错误:导出‘默认’(导入为'Swal')在'sweetalert2‘中找不到(模块没有导出)
步进
1.安装sweetalert2 2.在组件.ts文件上导入(从‘sweetalert2’导入Swal )3.使用Swal.fire()调用
/src/app/pages/signup/signup.component.ts:29:16-25 -错误:导出‘默认’(导入为'Swal&#
浏览 23提问于2022-01-26得票数 0
大家好，我收到了以下错误: Vue警告: v-on处理程序中的错误："TypeError：$(.).modal不是函数“。这里是我在welcome.blade.php中的代码：
<body>
<div id="app">
{{-- This is the vue component --}}
<new-arrivals></new-arrivals>
</div>
<!-- Scripts -->
<script src="
浏览 9提问于2022-06-28得票数 0
回答已采纳
我有一个使用TypeScript的react模块。
我想在Swal组件中使用html，但这行不通。
下面是我的代码：
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
const MySwal = withReactContent(Swal);
MySwal.fire(<p>Holahola</p>);
当我将鼠标悬停在"Holahola“上时，我得到了错误消息：”类型'Element‘与类
浏览 2提问于2019-12-11得票数 1
1回答
我用“甜蜜警报2”进行对话。
现在，如果应该删除或不删除数据库条目，我希望将其用于安全问题。显示对话框是没有问题的，但是如果delete被混淆了，我就找不到集成函数的方法。有人能帮帮我吗？
这就是现在的代码：
<script>
Swal.fire({
title: '',
text: "Diesen Eintrag wirklich löschen?",
icon: 'warning',
showCancelButt
浏览 7提问于2022-06-26得票数 0
回答已采纳
2回答
我使用Ajax和SweetAlert2库来使用警报UI。我搜索如何在从服务器获取数据的过程中显示加载过程，我认为我可以使用beforeSend函数。我写这样的代码。
因此，我将加载过程代码放入beforeSend中，但我不知道为什么它不能工作。所以我想检查它是否在beforeSend代码中工作，所以我在它里面写console.log代码，它实际上是工作的。但是我不知道为什么Swal.showLoading()；代码不能工作。
当我在google控制台中输入它时，它就能工作了。
装载代码很简单。
Swal.showLoading();
我想当它完成的时候显示完成代码。
/* Mypage */
浏览 0提问于2019-02-12得票数 0
回答已采纳
我正在使用sweetalert2插件。它可以正常工作，但是现在我想删除按钮类并添加我自己的类。
class=swal2-确认swal2样式的，但我需要class=swal2-确认btn -
任何解决方案都很感激！
Swal.fire({
title: 'Are you sure?',
text: 'You will not be able to recover this imaginary file!',
type: 'warning',
showCancelButton: tru
浏览 1提问于2019-07-13得票数 6
回答已采纳
1回答
我在试着用sweetAlert2。https://sweetalert2.github.io/ 计划如下： 1)主警报的显示 2)如果他点击“取消”，我会正常关闭警报。 3)如果他点击"OK"，则按钮将转到加载位置，但警报不会关闭。在此期间，我发出了一个Ajax请求。当它结束时，我才能关闭第一个警报并查看第二个警报。 4)当我在第二个警报上点击"OK“时，页面重新加载。 但就目前而言，我无法很好地管理如何在单击OK和Cancel时显示警报。 我有下面的代码： Swal.fire({
title:
浏览 15提问于2020-01-24得票数 0
回答已采纳
当状态未定义时，我试图进行有条件的呈现，并且我想显示一个甜言蜜语，以向用户显示他没有选择客户端。但是我收到了这个错误：
对象作为React子对象无效(找到:对象承诺)。如果您打算呈现一个子集合，请使用数组代替.。
片段：
const location = useLocation();
const ClientNotSelected = () => {
return (
<div>
{
Swal.fire({
title: 'Are you sure
浏览 10提问于2020-12-21得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
