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

  })

 }

巴特西

Vue $nextTick的一个使用场景

$nextTick

使用场景

在computed中定义校验 rules

btnRequiredFields click事件

btnOpitionalFields click事件

最新文章

热门文章