VueJS验证没有触发第一次调用

Question

好的，所以我有一个验证，我正在从输入框中调用模糊。我传递了 ID 并将它的验证限制在该方法中。我正在使用 Bootstrap Vue 来推送它的验证。

但我的问题是为什么验证在第一次调用时不起作用。为了解释起见，假设您不能为一个产品订购超过 5 个，并且您在数量框中输入 10，然后将鼠标移出框外。什么都没有发生，但是如果您将鼠标移入同一个框并鼠标移出，则会显示验证错误。

带有弹出框的输入框

这是在模糊时调用的 Mixin / 函数。 方法：{ 限制检查（ID，限制）{ // 重置弹出窗口和错误消息 this.$root.$emit('bv::hide::popover') var inputValue = document.getElementById("input-"+id).value this.errorMessage = '输入的数量太高：\n' var 验证 = ""

  validations = this.findAllValidation(limits, inputValue)

  this.errorMessage = this.errorMessage + validations

  if(validations.length === 0 && inputValue > 0){
    document.getElementById("button-"+id).disabled = false;
  }else if (inputValue <= 0){
    document.getElementById("button-"+id).disabled = true;
  }else{
    this.fireValidationPopover(id)
  }
},
findAllValidation(limits, inputValue){
  var validations = ""

  for (var key in limits) {
      if (limits.hasOwnProperty(key)) {
        if(inputValue > limits[key].value){
          validations +=  limits[key].name + " " + limits[key].value + "\n"
        }
      }
  }
  return validations
},
fireValidationPopover(id){
  document.getElementById("button-"+id).disabled = true;
  this.$root.$emit('bv::show::popover', "popover-"+id);
}
} // End Methods 

Answer 1

那么您是否尝试在<template> 内的输入框中调用@blur="yourValidationMethod"？

然后在<script>下data()初始化后定义你的验证方法

.
.
.
methods:{
          yourValidationMethod(){
            // Your validation codes here, triggered once 'blur' event 
          }
        }

通过简单的@blur 验证进行了测试，所以它有效。