产生问题的原因总结
- ref的定义与使用时,因为写错,单词不一致
- el-form-item 标签中绑定的 prop 与form对象中的变量不一致
- 在dialog或drawer组件中嵌套使用form时,先点击编辑后,直接给组件中的form赋值,导致form在第一次加载生成的时候,“ 初始值 ”直接就成了,当前编辑的form值,如果第一次是点击的添加功能,则“ 初始值 ” 为空,一切正常
解决方法
- 检查ref以及prop单词是否一致
- 在点击编辑之后把赋值的代码放在 nextTick 方法中
!!!!最重要的是 一定要把 drawer = true 放在方法第一行
// vue2
open() {
this.drawer = true
this.$nextTick(() => {
this.form = res.body.form
})
}
// vue3
function open() {
this.drawer = true
nextTick(() => {
this.form = res.body.form
})
}