完美解决Vuetify的v-dialog堆栈溢出报错Maximum call stack size exceeded

最新推荐文章于 2024-06-20 09:42:23 发布
最新推荐文章于 2024-06-20 09:42:23 发布
阅读量3.9k 收藏 1
点赞数 4
分类专栏： 异常解决 文章标签： bug vue debug vuetify vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Piconjo/article/details/106175515
版权
本文介绍了在使用Vuetify时遇到的v-dialog堆栈溢出异常问题，详细描述了问题出现的场景，即在第二次打开弹出框时点击文本框导致的错误。分析了可能的原因，并分享了最终的解决方法，即改用Vuetify官方提供的不使用激活器插槽的用法，成功避免了冲突并解决了问题。
摘要由CSDN通过智能技术生成

最近在做的项目有一个功能 需要在dialog弹出框输入用户的登录信息 于是乎遇到了一个丧心病狂的报错
找了各种搜索引擎 没有任何解决方案(ps：是用Vuetify的开发者太少了吗🤣)
功夫不负有心人 在不断的尝试下 最终还是解决了👍

问题描述

在弹出框第一次打开时 没有任何异常

然而问题来了 在第二次打开弹出框时 点击里面的文本框
立刻出现了Maximum call stack size exceeded堆栈溢出异常
从而导致文本框完全没法输入 毫无用户体验！
在这里插入图片描述
当刷新页面后 又是如此循环：第一个打开弹出框完全正常 第二次开始就报堆栈溢出异常了

原因

我纳闷了 我的代码中明明没有任何递归调用

而在另一个组件里 我用的是同样的弹出框 没有任何异常

在该组件中 我用了两个一样的弹出框用于登录(弹出框内的逻辑有点复杂所以并没有抽离复用)
那么 是否是我用了两个弹出框导致的

由于dialog默认是用插槽控制开关的 ：

<template v-slot:activator
最低0.47元/天 解锁文章
Piconjo_Official
关注
专栏目录
编程常用英语
hh_mfm的博客
09-14 1307
1. file n. 文件；v. 保存文件 2. command n. 命令，指令 3. use v. 使用，用途 4. program n. 程序 5. line n. (数据，程序)行，线路 6. if conj. 如果 7. display vt. 显示，显示器 8. set v. 设置，n. 集合 9. key n. 键，关键字，关键码 10. list n. 列表，显示，v. 打印 11. by prep. 凭，靠，沿 12. ..
4种防止模态框弹出时页面滚动的方法
最新发布
ufrontend的博客
08-06 325
武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育， 医疗，餐饮等。只需将一个类（例如，no-scroll）添加到 <body> 标签，并将其链接到带有 overflow:hidden 的 CSS 规则。再具体项目开发时，我们需要选择适合自己项目的情况，来匹配项目的需要，不能随意选择。当模态框弹出时，使用 JavaScript 添加此类，并在模态框关闭时将其删除。
vuetify-dialog-易于使用Vuetify的对话框。-Vue.js开发
05-27
vuetify-dialog此模块将帮助您在不使用烦恼模板的情况下使用vuetify对话框。vuetify-dialog该模块将帮助您在不使用烦恼的模板的情况下使用vuetify对话框。此模块将帮助您使用项目中的模式对话框Vuedl模块文档请参阅此处的文档安装程序从npm安装软件包重要说明：在拆分0.4.0版css和js之后，因此您必须手动导入css Vuetify 2对于Vuetify 2请使用[电子邮件保护的最新版本
标题：【强大而优雅的对话框解决方案】—— v-dialogs：为您的Vue应用增添交互魅力！
gitblog_00039的博客
06-20 368
标题：【强大而优雅的对话框解决方案】—— v-dialogs：为您的Vue应用增添交互魅力！ 项目地址:https://gitcode.com/TerryZ/v-dialogs 项目介绍 在开发网页应用时，对话框是我们与用户交流的重要工具。一个好的对话框库能够极大地提升用户体验和界面美观度。今天，我想向大家隆重推荐一款专为Vue2设计的对话框插件 —— v-dialogs。 v-dialogs ...
vue报错 ‘超出最大堆栈大小‘
qingdouxiaohua的博客
04-18 1328
在 Vue.js 中遇到 "超出最大堆栈大小"（Maximum call stack size exceeded）的错误通常意味着你的应用程序中有一个无限递归或者循环引用的情况。如果你在计算属性（computed properties）中引用了自己或其他计算属性，并且这些引用形成了一个闭环，那么这也可能导致堆栈溢出。如果你的组件之间通过事件（emit）和监听器（on）进行通信，并且这些事件和监听器形成了循环调用，那么也可能导致堆栈溢出。有时候，问题可能是由于使用了旧版本的库，而这些库在新版本中已经被修复。
vscode启动项目后，浏览器打开报错 “Maximum call stack size exceede”
m0_68965080的博客
01-09 580
查阅了一些别人的诱因，大多数说的是因为路由出现问题（比如路由配置里的命名或者逻辑问题等）。但是本人的问题应该是，浏览器对于这个界面的缓存超出。F12打开控制台===》应用===》找到localhost（或者你项目需要打开的网址）===》右键===》清除。通过vscode打开项目后，可以正常运行无报错，但是通过浏览器点开却不能跳转到登陆界面。win11系统，默认浏览器Edge。然后项目就可以顺利启动并且显示界面啦。
JavaScript——超出最大调用堆
m0_37616866的博客
12-10 1051
报错代码 Maximum call stack size exceeded 超出最大调用堆栈大小 let params = { "skillLevel":baseInfo.name } axios.get('/user?ID=12345', { params: params }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(e.
Vuetify笔记(4):v-dialog弹出对话框
热门推荐
u013089490的博客
11-13 1万+
  1、v-dialog对话框      v-dialog 组件用来通知用户有关特定任务的信息，并且可能包含重要信息，需要作出决定或者涉及多任务；应谨慎使用对话框，因为它是中断的。 v-dialog 组件常用属性 （1）max-width：限制宽度； （2）v-model：value值双向绑定到show变量，用来控制窗口显示； （3）persisitent：控制窗口不会被意外关闭，布尔类型，...
计算机常用1700英语单词
Black_黑色的博客
04-11 2103
在这里插入代码片 1. file n. 文件；v. 保存文件        2. command n. 命令，指令        3. use v. 使用，用途        4. program n.&nb...
计算机算法常用术语中英对照（分为两部分 其中一部分表格形式 ）
weixin_30488085的博客
06-25 4871
第一部分 Data Structures 基本数据结构 Dictionaries 字典 Priority Queues 堆 Graph Data Structures 图 Set Data Structures 集合 Kd-Trees 线段树 Numerical Problems 数值问题 Solving Linear Equations 线性方程组 B...
计算机专用英语词汇1500词
ay08
01-24 1368
计算机专用英语词汇1500词 《电脑专业英语》 file [fail] n. 文件；v. 保存文件 command [kəˈmɑ:nd] n. 命令，指令 use [ju:z, ju:s] v. 使用，用途 program [ˈprəugræm] n. 程序 line [lain] n. (数据，程序)行，线路 if [if] conj. 如果 display [disˈplei] vt...
vuetify框架_使用Vuetify.js框架实现vuedl对话框助手
cuk5340的博客
07-26 1056
vuetify框架 vuetify-dialog-vuetify对话框助手 (vuetify-dialog - vuetify dialog helper) Implementation of vuedl dialog helper with Vuetify.js framework 使用Vuetify.js框架实现vuedl对话框助手 This module will help you to...
堆栈溢出一般是由什么原因导致的 堆栈溢出怎么解决
weixin_52626887的博客
08-31 7659
过多的函数调用，导致调用堆栈无法容纳这些调用的返回地址，一般在递归中产生。堆栈溢出很可能由无限递归（Infinite recursion）产生，但也可能仅仅是过多的堆栈层级。下面小编给大家介绍一下“堆栈溢出一般是由什么原因导致的 堆栈溢出怎么解决”...
vscode运行打包vue项目内存溢出的报错和解决办法
青烟小生的博客
03-29 6276
vscode运行打包vue项目内存溢出的报错和解决办法 最近在再弄一个旧项目的时候发现这个项目异常的大，内容涉及很多，导致我在运行的时候发生了内存的溢出，虽然不影响代码跑起来，但是他时不时保存的时候就断了就很烦，没办法，就去找各种办法来解决，下面就是碰到的问题和一些别人的解决办法 最终的解决办法 ----------------------2022-03-29 最后发现是因为node的版本太高，如果要解决只能把node版本给重新安装一次 真的是无语了，希望大家引以为戒！！！！！！！！！！！！！！！！
vue-vuetify-electron 项目,源码在GitHub 希望对大家有所帮助
dibr63585的博客
03-08 292
点击进入 github项目地址 转载于:https://www.cnblogs.com/xxxxue/p/11153594.html
Material Design风格神框架vuetify 学习笔记(十) 基础组件6 对话框 响应式长宽比 徽标 横幅...
finedayforu的博客
08-30 781
一. 对话框 v-dialog 组件通知用户特定的任务，可能包含关键信息、需要决策或涉及多个任务。 请尽量少用对话框，因为它们会中断(流程)。 1. 对话框 对话框包含两个插槽，一个用于它的激活器，另一个用于它的内容(默认)。 <template> <v-container grid-list-xs> <v-dialog v-model="di...
vue3 中对 dialog 的封装
niyooooo的博客
04-12 2915
父组件 let dialogVisible: Ref<boolean> = ref(false); <Dialog v-model:dialogVisible="dialogVisible" /> 子组件 <script setup lang="ts"> // 接收父组件传来的 defineProps<{ dialogVisible: boolean; }>(); // 子传父 const emits = defineEmits(["upd
vue项目中遇到(Maximum call stack size exceeded)错误的处理
csdn_wpno1的博客
08-21 1万+
发现问题： 近期公司要求用vue组件化开发一个管理后台，项目中用到了天地图的绘制功能，这部分产出了许多对象实例，单个组件往里面导入大量数据的时候（部分对象存在上万个数据），发生了内存溢出的错误。 分析问题： 从报错信息可以看出是地图相关数据造成的，而根据需求这部分数据在当前组件中是不需要展示的，而我写的代码是把这些数据存在了data中，众所周知vue的响应式处理会产生大量的setter和gette...
el-dialog内容溢出
08-17
对于el-dialog内容溢出的问题，您可以尝试以下解决方法： 1. 设置el-dialog的max-height属性，限制内容的高度。您可以使用CSS来设置max-height属性，例如： ``` <el-dialog :max-height="300"> <!-- 内容 --> </el-dialog> ``` 这样设置后，内容高度超过300px时，会出现滚动条。 2. 使用CSS的overflow属性来控制内容的溢出，例如： ``` <el-dialog style="overflow: auto;"> <!-- 内容 --> </el-dialog> ``` 这样设置后，当内容超出el-dialog的尺寸时，会出现滚动条。 3. 如果el-dialog内部有较长的文本内容，您可以考虑使用CSS的word-break属性来处理文本换行问题，例如： ``` <el-dialog style="word-break: break-all;"> <!-- 内容 --> </el-dialog> ``` 这样设置后，较长的文本将会在单词之间进行换行。 希望以上方法能够帮助您解决el-dialog内容溢出的问题！如果还有其他疑问，请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值