element-ui中的el-dialog 右上角关闭按钮引起Vue warn: Avoid mutating a prop directly

最新推荐文章于 2023-11-01 10:36:35 发布
最新推荐文章于 2023-11-01 10:36:35 发布
阅读量399 收藏
点赞数
文章标签： vue.js ui elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60424565/article/details/127308270
版权

用dialog的这种写法:(手动实现一个before-close事件，在事件里面用Vue的$emit语法去修改属性。):

  <el-dialog title="Detail" :visible.sync="dialogFormVisible" :before-close="back">
  
  </el-dialog>
  back() {
      this.$emit('update:dialogFormVisible',false);
    },

哆O啦O梦
关注
vue.esm.js?efeb:591 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten w
郭宝的博客
12-11 1万+
问题： vue.esm.js?efeb:591 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on th...
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 6930
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
简单解决vue、Element-UI项目中，关闭对话框子组件时的常见报错（Avoid mutating a prop directly...）
weixin_46557501的博客
05-08 1738
问题复现 父组件通过控制，对话框子组件的visible.sync属性，达到控制对话框子组件显示与隐藏的效果。 // 父组件 <addAndEdit :visiable="visiable" @notShow="notShow" :title="diaTitle" v-if="visiable" > </addAndEdit> // 子组件 <template> <div > <el-dialog
vue+elementui el-dialog 子组件 右上角关闭和按钮关闭
m0_65274248的博客
10-09 8356
vue+elementui el-dialog 子组件 右上角关闭和按钮关闭
el-dialog右上角关闭事件
最新发布
weixin_55725100的博客
11-01 1467
before-close事件，是右上角的“X”关闭按钮触发的事件。
Element-UI Dialog自定义组件点关闭按钮 报错：Avoid mutating a prop directly since the value will be overwr...
yfm120750310的博客
03-11 907
Element-UI Dialog自定义组件点关闭按钮 报错：Avoid mutating a prop directly since the value will be overwr…
el-dialog点击右上角的×关闭，会报错
farmss的博客
11-02 1797
el-dialog点击右上角的×关闭，会报错：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "show" <div> <el-di.
【VUE】异常解决：Avoid mutating a prop directly since the value will be overwritten
m0_67394006的博客
03-02 811
author: date: 2021.07.03 文章目录 1. 需求及报错 2. 分析原因 2.1 这是什么原因造成？ 3. 解决方案: 使用 v-on 明确实现修改方式 4. 参考 1. 需求及报错 需求： 使用的场景是：A 组件中引用 B 组件，使用 v-model 给 B 传递参数，B 使用 props: { value } 接收内容，在 B 中根据逻辑直接修改并赋值 value， 事件触发后在浏览器 console 里看到报错，内容如下： Avoid mutating a .
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "dialogVisible"
05-24
这个警告是因为你正在尝试直接修改一个作为 prop 传递给...这样，在子组件中修改 "dialogVisible" 属性时，实际上是在修改子组件的本地 computed 属性，而不是直接修改父组件传递的 prop。这样就可以避免 Vue 的警告。
dialog弹窗关不掉 vue_elementUI弹窗之坑（dialog的遮罩层在弹出层的上面，子弹窗执行保存（确定）按钮之后还要执行取消按钮，Prop being mutated: "showTre...
weixin_30539747的博客
12-24 3444
本文主要解决elementUI弹窗嵌套中的坑,笔者在给同事解决难听过程看到了三个问题：弹窗套弹窗出现蒙层、弹窗套弹窗，子弹窗执行保存(确定)按钮之后还要执行取消按钮、弹窗自带关闭x按钮报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent compone...
elementui的dialog点击右上角关闭按钮关闭dialog
wangaiwen的博客
03-08 3819
elementui的dialog点击右上角关闭按钮关闭dialog
使用electron-vue构建的应用打包后el-dialog弹出框右上角关闭按钮显示异常
weixin_43398820的博客
08-14 1178
背景： electron-vue中使用了element-ui中的el-dialog来显示弹出框，在打包后el-dialog右上角的关闭按钮显示异常，具体现象如下图所示： 分析 查看错误信息显示element-icons-fonts.woff 和 element-icons-fonts.ttf没有找到。 通过asar解压app.asar文件中可以看到文件在element-fonts中但是最终查找是在electron-main-fonts去查找了。 解决 .electron-vue目录下的webpack
Vue自定义组件中使用Element-UI Dialog组件，点击关闭报错 [Vue warn] Avoid mutating a prop directly
yanxiaomu的博客
03-27 1353
Vue自定义组件中使用Element-UI Dialog组件，点击关闭报错 [Vue warn] Avoid mutating a prop directly 这是由于自定义组件使用了传入的prop作为 Dialog 的visible绑定值，导致Dialog关闭直接修改了prop而被vue警告，并且操作失效 解决方法也很简单 组件引用是传入属性使用 .sync 修饰符 <comp :visi...
element ui 使用dialog关闭报错
c2311156c的博客
07-16 4130
问题描述： 在打开了dialog后，点击右上角自带的关闭按钮后，对话框虽然可以关闭，但是浏览器的控制台上报错： 源码如下： &lt;el-dialog title="新增评价组" :close-on-click-modal="false" :visible.sync="this.showCreateGroupDialog" width="50%"&gt; data() { r...
工作笔记：Element-UI Dialog自定义组件点关闭按钮 报错：Avoid mutating a prop directly since the value will be overwr...
liudan123012的博客
08-31 2687
页面打开Dialog对话框，点击取消和确认正常，点击关闭按钮能关闭Dialog对话框，但是会报错。 修改之前的代码： //父组件 <set-refund-withdraw v-if="withdrawDialogVisible" :visible.sync="withdrawDialogVisible"> </set-refund-withdraw> //子组件 <el-dialog :close-on-click-modal="false" title
el-dialog 的坑(关闭弹窗时触发了子组件的created/mounted)
岁月流熵，用理智/秩序构建堡垒留存我们的光芒
07-10 1808
el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是设置了destroy-on-close为true，所以会在关闭时会触发 created。取消 destroy-on-close 的使用，如果需要进行销毁dialog中的元素，可以使用 v-if。
Vue中使用element-ui的el-dialog对话框，实现拖拽效果
蒋小姐的博客
12-10 3782
element-ui的el-dialog对话框，没有拖拽移动的效果，需要自定义指令来实现对话框拖拽。 1.准备：在准备一个vue组件（点击按钮弹出对话框） // 功能：弹出一个对话框--element-ui默认dialog对话框不能拖拽 <template> <div> <!-- 按钮 --> <el-button @click="dialogVisible = true">点击显示对话框</el-button&
vue-组件详解
qq_42450726的博客
10-09 399
VUE-组件组件的定义组件的定义组件组件挂载全局挂载局部挂载组件使用注意 组件的定义 使开发者根据自己的需求,扩展 HTML 元素，封装可重用的代码。 有利于修改代码,提高了代码的易用性 组件的 定义组件 组件也是Vue实例,因此就有了data、method、computed、watch等属性。 组件的命名通常是大驼峰（CaBa）或者是下划线(ca-ba)的命名方式。 teplate属性是组件中至关重要的一环,它表示组件是以何种元素组成 例如: const CommonHead={ templ
ELement组件dioalog作为组件时点右上角关闭无法再次打开
qq_42306286的博客
04-02 2550
将组件中包含dialog时，如果不对其进行一些设置，点击关闭后会报错而无法再次打开。 两种方法，第一种是将关闭按钮去掉，:show-close="false" <el-dialogtitle="":visible.sync="updateModelDialog"width="55%"center:show-close="false"> 第二种是调用关闭回调方法，让他和取...
Vue中使用element-ui的el-dialog对话框
05-30
要在Vue中使用element-ui的el-dialog对话框，你需要先安装element-ui，可以使用npm或者yarn进行安装。 1. 通过npm安装 ``` npm install element-ui --save ``` 2. 通过yarn安装 ``` yarn add element-ui ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值