element-ui中el-dialog的v-model不能绑定数据的问题

最新推荐文章于 2024-04-27 13:01:21 发布
最新推荐文章于 2024-04-27 13:01:21 发布
阅读量1.8k 收藏 1
点赞数 1
分类专栏： 实际开发中出现的问题 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Satosere/article/details/120443157
版权

系列文章目录

文章目录

前言

一、element-ui中el-dialog的v-model不能绑定数据的问题

1.1 原因

应该是官方文档没有更新，或者是版本太高导致的

1.2 解决

:vsisible.sync = “flag”

:visible指的是属性绑定，表示弹框的显示隐藏，当:visible的值为ture的时候，弹框显示，当为false的时候，弹框隐藏
后面的.sync指的就是同步动态双向的来表示visible的值，当我们关闭窗口的时候，这个弹框隐藏了，visible的值发生了变化，
但是关闭窗口这个动作，我们没法用确定的动作去判断这个值，
所以用到了vue中的双向绑定的原则，在vue中统一加上了.sync来表示同步的修改了visible的值。

总结

Satosere
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elementui el-dialog的一个小坑
lj872224的博客
03-13 9516
<el-dialog title="编辑库存" :visible.sync="dialogFormVisible"> <div style="border-bottom:1px solid #E6E6E6;width:100%;margin-top:-20px;"></div> ...
v-model绑定对象检测不到属性变化？
v-model绑定对象检测不到属性变化？
07-02 8258
v-model绑定 v-model大家都知道绑定的是数据源，可以把数据的变化更新到页面上，但是昨天我却遇到了这个问题。看代码 <!-- html代码 --> <el-col :span="12"> <el-form-item :label="$t('accountSubjectInfo.countriesRegions')"> <el-s...
vue 打开dialog v-model 失效
qq_31683775的博客
07-20 904
vue3使用Element-Plus框架Dialog v-model绑定问题解答
weixin_46426412的博客
03-04 2906
vue3使用 Element-Plus框架，Dialog 绑定弹出层展示隐藏，问题解决
Vue3 el-dialog 二次封装踩坑实录（v-model moduleValue 不触发）
最新发布
Li_Ning21的博客
04-27 763
如果你封装了一个el-dialog的子组件，想通过父组件v-model的形式调用，切记不能使用v-model，要使用 v-model:[你的参数]，例如 v-model:visible。
【vue】el-time-pick is-range用法时绑定数组问题
王佑辉的博客
07-30 2265
1.问题 1.el-time-pick控件is-range用法，当v-model用的是数组时，选择时间会有问题，如图： 2.代码如下
el-dialog的v-model的状态已经改变但是却不显示弹窗
weixin_45779102的博客
08-20 2546
1、如果有遮罩层出现但是弹窗被遮挡，根据element的文档： “正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。” 2、如果弹窗和遮罩层都不显示，有可能是弹窗内容出现了错误，可以试着把里面的内容逐个注释试验一下。 ...
elementui 中form表单的model的作用
duanyuehuan
07-19 7043
目前el-form的model主要用表单验证的，也就是配合el-form的rules和el-form-item的prop来使用的。
Elementui el-input 实现自定义 v-model
asing1elife's blog
09-24 9613
Vue 本身支持自定义组件实现 v-model ，但 el-input 作为 Elementui 的自定义组件也已经实现 v-model ，那么如果在自定义组件中使用 el-input ，但自定义组件也想实现 v-model ，应该怎么做？ 错误的方式 Vue 中让自定义组件实现 v-model 可参考 Vue自定义v-model 但如果按照这种方式想要让以下代码实现 v-model ，是不...
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
主要介绍了基于element-ui对话框el-dialog初始化的校验问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element-ui中dialog弹窗关闭按钮失效的解决
10-14
主要介绍了element-ui中dialog弹窗关闭按钮失效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element ui 对话框el-dialog关闭事件详解
08-27
下面小编就为大家分享一篇element ui 对话框el-dialog关闭事件详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue2 el-date-picker 直接赋值不生效、数据绑定无效
qq_43120764的博客
12-21 3181
<el-date-picker v-model=“formData.planTime” @blur=“timeChange” type=“datetimerange” value-format=“yyyy-MM-dd HH:mm:ss” range-separator=“至” start-placeholder=“开始日期” end-placeholder=“结束日期”> 当直接给formData.planTime赋值是 formData.planTime= value ， 界面没有变化。但是f
关于datetimepicker和vue v-model指令双向数据绑定失败的问题
weixin_30797027的博客
07-27 2719
关于datetimepicker和vue v-model指令双向数据绑定失败的问题 1，v-model监听用户输入事件以更新数据,并特别处理一些极端的例子。这是v-model指令的解释。 2，解决方案通过日期控件隐藏时，通过vue.set方法赋值。代码如下<code>Vue.set(pricecollectorVue.rowTemplate,ev.target.id, $...
el-time-picker绑定数据遇到的问题
weixin_44326167的博客
03-10 969
最后贴一下我的解决代码片段，原理就是调用new Data()方法，里面传递当前年月日的信息，将数据转变为组件可以识别的数据。一是数据没有回显，二是时间组件选不了时间无法滚动。网上搜索发现很多人遇到了这个问题，但是良久也没有找到有效的办法。事情是这样的，今天写代码遇到一个回显日期以及时间的需求。至此，el-date-picker回显正常，一切功能正常。回显日期的组件我使用的是：el-date-picker。回显日期的组件我使用的是：el-time-picker。接下来我要对时间赋值进行回显，贴上我的代码。
使用Element ui的from表单验证时，绑定的值无法在验证函数中获取值,恒为undefined的问题分析。
陈先生的博客
12-13 2496
在最近使用element ui的form表单功能进行开发时，通过prop绑定时，无法正确的获取value值，一直输出为undefined，通过调查发现，目前el-form的model主要用表单验证的，也就是配合el-form的rules和el-form-item的prop来使用的。上面是个错误的示范，如果把要验证的数据放在了model绑定的对象外，那么就无法获得数据，验证规则内会一直得到undefined。当你已经对该属性进行绑定后，那么接下来，你的表单的prop默认绑定的值就是model绑定的对象的值。
elementUI el-radio不能绑定数值问题
LunaXuuuu的博客
11-17 1434
如果是el-input框，v-model就能绑定数值，但是el-radio的label值不行 解决方法：使用 :label <el-radio v-model="updateEc.ectype" :label="0">0奖</el-radio> <el-radio v-model="updateEc.ectype" :label="1">1罚</el-radio> ...
解决ElementUI表单中下拉框的值在关闭对话框时v-model绑定的值会被清空的情况
1
06-05 581
在关闭对话框的时候手动将form.role的值保存到一个变量中,下次打开对话框时将这个变量的值赋给form.role即可。// 打开对话框时将保存的值赋给下拉框。// 关闭对话框时保存下拉框的值。// 保存下拉框的值。
el-dialog 里面的组件不刷新问题
曉儂
01-23 3208
el-dialog里面的内容是带缓存的，也就是说除了第一次打开会初始化，其他次打开都是直接加载缓存的。 我们想每次打开el-dialog都要初始化，比如用户的权限弹框，每次打开我们都要把用户拥有的权限选中，类似的操作，如果加载了缓存，这就会导致每个用户回填的权限都一样了。 如果我们在每次关闭弹框时把弹框里面的内容删掉，这样打开时就会初始化了。 查阅了 Dialog 对话框 相关文档： 文档中有，我们可以设置为 :destroy-on-close=“true” 试一试。 <el-dialog
el-dialog写v-model
07-27
el-dialog 是 Element UI 中的一个组件，用于创建一个对话框。它没有直接支持 v-model，但可以通过自定义组件的方式实现类似的效果。 首先，创建一个自定义组件，例如 MyDialog，将 el-dialog 作为其子组件，并在该...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值