Vue $nextTick的一个使用场景

$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() // 真正的提交方法
  })
 }