bug解决:Uncaught (in promise) TypeError: Toast.loading is not a function

news/2024/11/1 21:36:50/

在使用vue3做项目时,在其中使用了vant框架,在使用toast的加载组件或者是一些其他组件时,出现了如下的错误:Uncaught (in promise) TypeError: Toast.loading is not a function

错误代码如下:

Toast.loading({ message: '加载中...', forbidClick: true,});

通过检查,可以发现:

我在package.json中使用的版本是vant4

通过对比发现,在vant3中toast的使用是这样:

Toast.loading({ message: '加载中...', forbidClick: true,});

Toast.success('成功文案');Toast.fail('失败文案');

然而在vant4版本中,toast的使用已经发生了变化,如下:

import { showLoadingToast } from 'vant'; showLoadingToast({ message: '加载中...', forbidClick: true,});

import { showSuccessToast, showFailToast } from 'vant'; showSuccessToast('成功文案');showFailToast('失败文案');

所以正确的代码应该是:

showLoadingToast({

message: "加载中...",

forbidClick: true,

});

即可解决问题。

总结:错误原因就是使用的vant版本和其对应的代码不匹配。


http://www.ppmy.cn/news/20183.html

相关文章

C技能树-判断语句

三个数从小到大排序并输出 任意输入3个整数&#xff0c;使用if语句对这3个整数由小到大进行升序排序。请判断下面哪一项无法实现该功能。 #include <stdio.h>/* 交换x和y */ void swap(int* x, int* y) {int temp *x;*x *y;*y temp; }int main(int argc, char** arg…

springboot 入门

springboot是什么 传统的开发模式下&#xff0c;无论是基于xml或注解&#xff0c;都要做许多配置&#xff0c;如果项目中集成越多的其他框架&#xff0c;配置内容也会越多。为了让开发人员以最少的配置去开发应用&#xff0c;springboot诞生了。springboot的原则是约定大于配置…

untiy TextMeshPro(简称TMP)组件详细内容

首先unity官方API对该组件的描述是&#xff1a; TextMeshPro 是 Unity 的最终文本解决方案。它是 Unity UI Text 和旧版 Text Mesh 的完美替代方案。 功能强大且易于使用的 TextMeshPro&#xff08;也称为 TMP&#xff09;使用高级文本渲染技巧以及一组自定义着色器&#xff1b…

Android 蓝牙开发——Avrcp协议(十二)

SDK路径&#xff1a;frameworks/base/core/java/android/bluetooth/ 服务路径&#xff1a;packages/apps/Bluetooth/src/com/android/bluetooth/ 在使用协议类的时候无法找到该类&#xff0c;由于安卓源码中关于蓝牙协议的 Client 部分或相关接口都被 hide 给隐藏掉了&#xf…

初学者如何学好Java数组,不妨点进来看看,赶在新年前肝完的万字博客

新年好~~~新年开篇万字博客 —Java数组的学习,有点干货,建议收藏观看!!! 本篇介绍了数组的概念,数组创建和初始化.数组的使用(元素访问,和数组遍历方法),初识引用数据类型,简单介绍JVM内存分布,认识null,堆区空间的释放 二维数组相关知识的介绍~ 学习Java中的数组一.数组的基本…

一起自学SLAM算法:10.3 机器学习与SLAM

连载文章&#xff0c;长期更新&#xff0c;欢迎关注&#xff1a; 前面已经分析过的8种SLAM算法案例&#xff08;Gmapping、Cartographer、LOAM、ORB-SLAM2、LSD-SLAM、SVO、RTABMAP和VINS&#xff09;都可以称为传统方法&#xff0c;因为这些算法都是在人为精心设计的特定规则下…

LeetCode[685]冗余连接II

难度&#xff1a;困难题目&#xff1a;在本问题中&#xff0c;有根树指满足以下条件的 有向 图。该树只有一个根节点&#xff0c;所有其他节点都是该根节点的后继。该树除了根节点之外的每一个节点都有且只有一个父节点&#xff0c;而根节点没有父节点。输入一个有向图&#xf…

原力分入门技能树-模拟

博客(blog) 以下哪种情况不可以提升原力分&#xff1a; 发高质量博客发低质量博客博客被点赞博客被评论 质量分(qc) 在以下哪个网址中可以查询博文质量分&#xff1a; https://ask.csdn.net/https://bbs.csdn.net/https://blog.csdn.net/https://www.csdn.net/qc 问答(as…