当前位置: 首页 > Web前端 > JavaScript

element plus + vue3表单第一次数据未清空的bug问题解决

时间:2023-03-27 17:10:42 JavaScript

vue2在vue2中可以使用this.$nextTick(()=>{//这里给form赋值})方法来解决/*modify*/constupdateBox=async(row:any)=>{this.$nextTick(()=>{//这里给表单赋值//formData=row})}vue3也可以用vue3中的nextTick来解决import{nextTick}from"vue";/*modify*/constdialogShow=ref(错误的);//打开对话框constupdateBox=async(row:any)=>{dialogShow.value=true;nextTick(()=>{//formData=row});};nextTick是推迟到下一个DOM更新周期后执行的回调。更改一些数据后立即使用它以等待DOM更新。注意:nesxTick建议放在函数的最后一步。如果dialogShow放在nextTick之后,nextTick将不起作用。清除表单注意事项element清除表单数据的resetFields()函数其实和表单上的prop属性有关。只有当表单上有相应的prop属性时,数据才会被清除。constdata=ref({name:null,priceDesc:null})在这里,nameprop=name添加到输入框,但没有添加描述部分,所以使用resetFields()清除表单数据时,只会重置数据中的name值。priceDesc的值不会改变,需要手动重新设置。