$nextTick
- 官方解释
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM
使用场景
- 在页面上有2个表单元素和2个按钮 btnRequiredFields / btnOptionalFields
- 点击
btnRequiredFields
表单2个元素是必填项,有*
- 点击
btnOptionalFields
表单2个元素非必填项,无*
在computed中定义校验 rules
// msgFlag在data中定义,根据点击的按钮变化 true/false
computed: {
formRules() {
return {
applyMobile: [{ required: this.msgFlag, message: '请输入申请人手机' }],
notifyContent: [{ required: this.msgFlag, message: '请输入通知内容' }]
}
}
},
btnRequiredFields click事件
handleRequired() {
this.operateType = 1
this.msgFlag = true
this.$nextTick(() => {
this.handleConfirm() // 真正的提交方法
})
}
btnOpitionalFields click事件
handleOpitional() {
this.operateType = 2
this.msgFlag = false
this.$nextTick(() => {
this.handleConfirm() // 真正的提交方法
})
}