在Dialog组件里引用不到ref属性

最新推荐文章于 2024-02-17 11:24:14 发布
最新推荐文章于 2024-02-17 11:24:14 发布
阅读量1.6k 收藏 2
点赞数 1
分类专栏： Element UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xjh01/article/details/104101308
版权

在做一个点击编辑数据栏，然后弹出Dialog框，显示两个input，在其中placeholder是之前的值

想到用ref引用元素赋值，但总是提示ref元素undefined。搜索过后得以解决

用$nextTick，这个的功能就是等所有的DOM元素节点都渲染完成以后才执行其里面的方法，不然获取不到Dialog里面元素的ref值

 

如上图，就能解决Dialog里面引用ref的问题

xjh01
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序使用 vant Dialog组件的正确方式
10-15
2. 在对应的 WXML 文件中，将 Dialog 组件添加到页面结构中。例如，在 xxx.wxml 中： ```html <van-dialog id="van-dialog" /> ``` 这里的 `id` 是为了在 JavaScript 中方便引用该组件。 3. 在对应的 JS 文件中，...
element-UI 组件 dialog 中 ref 获取不到的问题解决方案
LJJONESEED的博客
12-06 5565
官方解释 Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。 解决方法： <el-dialog @open="show()"></el-dialog> show() { //防抖 setTimeout(() => { console.log(this.$refs); }, 0); }, ...
vue3 element-plus中，el-dialog组件内，无法通过ref获得组件实例
hookind的博客
07-26 5720
vue3 element-plus中，el-dialog组件内，无法通过ref获得组件实例 。 对话框中的内容是懒加载的，这意味着在对话框打开之前，默认插槽（个人理解为el-dialog标签内的内容）不会被渲染到DOM上。因此，如果你需要执行一个DOM操作或通过ref访问组件，可在open事件回调中进行。经过测试，发现可以通过opened事件回调（open不行），可以访问el-dialog中组件的实例。...
el-dialog中ref无效
愤怒的苹果ext的博客
10-31 790
el-dialog中的组件是不会提前加载的。所以使用$refs会报错。
elementplus的dialog组件里写form组件，vue3项目在打开弹框的时候，拿不到proxy.$refs.formRef这个组件实例对象，原因是dialog组件是懒加载的
Frank_colo的博客
10-24 435
elementplus的dialog组件里写form组件，vue3项目在打开弹框的时候，拿不到proxy.$refs.formRef这个组件实例对象，原因是dialog组件是懒加载的，在打开dialog组件之前，写在dialog组件里的插槽内容的dom元素是拿不到的，也就是form组件的dom元素是拿不到的。在dialog组件的open事件函数中，拿proxy.$refs.formRef组件实例对象，这才能拿到。getCurrentInstance不需要导入，直接用。
js dialog弹窗组件
01-07
在JS中，`dialog`对话框组件是一种常见的用户交互元素，它用于显示警告、确认信息或者进行简单的输入操作。在网页设计中，对话框能够提供更加直观和丰富的用户体验，使得用户在不离开当前页面的情况下，可以执行特定...
Jquery中dialog属性小记
12-12
代码如下: $(‘#dialogDiv’).dialog( { hide:true, //点击关闭是隐藏,如果不加这项,关闭弹窗后再点就会出错. autoOpen:false, height:380, width:800, modal:true, //蒙层（弹出会影响页面大小） title:’开标人’,...
Angular使用动态加载组件方法实现Dialog的示例
08-27
在实现Dialog组件时，我们可以使用ComponentFactoryResolver来动态加载组件，并使用ViewContainerRef来创建组件实例。同时，我们还需要实现销毁指定Dialog的方法，并提供回调动态加载组件的实现方式。 六、 总结 ...
vue-dialog的弹出层组件
08-31
在弹出层内容管理组件中，我们可以使用 computed 属性来计算弹出层的 zIndex 层级关系。 发布到 npm 如果我们想将 Vue Dialog 弹出层组件发布到 npm，我们需要编写正确的 package.json 文件，并使用 npm publish ...
element-UI 组件 dialog 中 ref 获取不到元素
最新发布
快乐的小豆子的专栏
02-17 753
vue3集成bpmn.js 渲染过程中，进行流程图查看。
ElementUI-在Dialog中, 获取Table组件的ref值为undefined
木木夕石 的博客
09-08 4113
记录一下这个问题, 以便后期翻阅. 需求: 在 Dialog对话框中, 使用的复选框Table组件, 我的需求是 在显示对话框时, 清空Table组件的复选框勾选状态 问题: 在显示对话框后, 通过 ref 获取table时, 结果返回undefined!!! HTML代码 显示对话框的函数 控制台显示 因为 获取ref的结果为undefined, 才导致无法使用 clearSelection 清空函数. 后来 度娘谷哥 了一番, 有很多帖子说套上 $nextTick 就行. 我也试了试. 代码如下
vue 或者 uniapp ref的用法总结
热门推荐
wangongchao的博客
01-29 1万+
1.基本用法，本页面获取dom元素 <template> <div id="app"> <div ref="testDom">11111</div> <button @click="getTest">获取test节点</button> </div> </template> <script> export default { methods: { getTest()
uniapp --不使用 ref 指令怎么才可以获取表单中的 value 值
世界和我们都不该止步于此
09-06 869
我们可以给到form表单组件一个 @submit事件，当点击提交按钮的时候将触发这个函数，而这个函数将会接收到一个事件对象 e，然后我们打印一下这个事件对象 e 就不难发现在我所写的这个路径下就可以通过name值去访问 表单的 value 值 😃。之前我并没有具体了解过，所以我是用 Vue 的·ref指令通过 $refs 来获取，没想到失败了，不过好在这个问题网上有很多关于解决这个问题的说法，准确来说我们不是想用 ref 来获取表单数据，我们使用任何方法都是可以的，我们只想实现这个功能。
解决element-ui el-dialog 中 含有el-table时 $refs获取不到的问题
微雨燕双飞
03-25 6496
在项目中遇到一个坑，element-ui el-dialog 中 含有el-table时 $refs获取table的ref总是undefined 研究了很久发现一个解决办法有效，比定时器先打开dialog再关闭的方案好多了 //点击显示Dialog showParentModel(){ //这个是dialog显示 this.dialogParentVisible = true; ...
vue的ref获取的值为undefind或者在dialog获取ref不存在
Jul的博客
03-12 1555
大致理解为 ref是在ref绑定的节点渲染完成之后才创建，初始使用时候获取不到。所以在mouted里使用的时候，DOM这时候想要更新，必须使用this.$nextTick来操作DOM。 el-dialog的坑，有一个场景，点击对话框之后，我们要操作对话框里的内容，这时候我们method里直接使用this.$refs.el获取不到，以上同理。 this.$nextTick(() => { this.$resf.el }) ...
在封装或使用el-dialog的时候无法获取到 $refs的坑
weixin_46468143的博客
09-01 1724
在封装或使用el-dialog的时候无法获取到 $refs的坑
vue之获取dialog 中的组件ref对象
qq_34907249的博客
11-03 1149
el-button type="primary" @click="handleClick(2)">保存取 消title="签章"
element-UI 组件 dialog 中 ref 获取不到 dom 的问题解决方案
Mr_CZL的博客
08-04 3825
场景： vue + elementUI的项目。 dialog弹窗内包含表单，表单需要必填校验。 关闭弹窗或者再次打开弹窗前需要重置表单和重置校验（不显示上次的红色提示） 遇到的问题： 当直接使用 this.$refs[ref].resetFields()会报错 官方解释： Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过ref获取相应组件，请在open事件回调中进行。 解决方...
el-dialog 里绑定的ref取不到
07-28
这是因为`el-dialog`组件在初始渲染时可能还没有被插入到DOM中，导致无法获取到它的引用。 为了解决这个问题，您可以尝试使用`this.$nextTick`来确保在DOM更新后再去访问`$refs`。下面是一个示例代码： ```...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值