elementui 再次打开dialog,绑定的数据没有更新

文章讲述了在Vue应用中使用dialog组件遇到的问题,即dialog关闭后再打开,由于DOM未重新渲染,下拉选择的内容不会重新加载。解决方案是利用v-if指令控制dialog的显示,确保每次打开时都会触发组件的生命周期方法,从而重新发送请求。
摘要由CSDN通过智能技术生成

我在dialog中弄了一些表单,然后做了一个组件请求了一个内容后做了下拉的选择。。
但是让我奇怪的是,关闭dialog再次打开的时候就没有重新发送下拉的请求。

主要是因为dialog再次打开时不会重新渲染dom,只是简单的显示隐藏,所以第一次打开绑定值后,关闭再打开则不会走created和mounted生命周期,解决办法是在外层套一层div,用v-if控制

解决办法:
在dialog中加了如下代码,这样dom节点就会重新生成了。。
<el-form v-if=“visible”

ElementUIdialog 中,可以通过绑定表单验证规则(rules)来实现表单的验证。具体步骤如下: 1. 在 dialog 中添加一个表单,表单中包含需要验证的输入框等表单元素。 2. 在表单元素中添加 `v-model` 属性,用于绑定输入框的值。 3. 在表单元素中添加 `:rules` 属性,用于绑定验证规则。 例如,验证一个输入框必填且长度在 6-20 个字符之间,可以在模板中添加如下代码: ```html <el-dialog> <el-form> <el-form-item label="用户名" prop="username"> <el-input v-model="username" :rules="[ {required: true, message: '请输入用户名', trigger: 'blur'}, {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'} ]"></el-input> </el-form-item> </el-form> </el-dialog> ``` 4. 在 dialog 的确认按钮(或提交按钮)的点击事件中,调用表单的验证方法 `validate`,判断表单是否通过验证。如果表单验证通过,则执行后续操作;否则,提示用户错误信息。 例如,在确认按钮的点击事件中,可以添加如下代码: ```javascript this.$refs.form.validate((valid) => { if (valid) { // 表单验证通过,执行后续操作 } else { // 表单验证失败,提示用户错误信息 this.$message.error('表单验证失败,请检查输入是否正确!'); } }); ``` 注意,这里的 `this.$refs.form` 是 dialog 中的表单组件的引用,需要在组件中添加 `ref` 属性来获取该引用: ```html <el-dialog> <el-form ref="form"> ... </el-form> </el-dialog> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值