时间戳

首页 > 解决方案 > VueJS验证没有触发第一次调用

vue.js - VueJS验证没有触发第一次调用

问题描述

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

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

带有弹出框的输入框

这是在模糊时调用的 Mixin / 函数。methods:{ limitChecking(id, limits) { // 重置弹出窗口和错误消息 this.$root.$emit('bv::hide::popover') var inputValue = document.getElementById("input-"+id) .value this.errorMessage = '输入的数量太高：\n' var validations = ""

  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

标签： vue.jsvuejs2vue-componentbootstrap-vue

解决方案

那么你有没有尝试调用@blur="yourValidationMethod"你的输入框<template>呢？

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

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

做了简单的@blur验证测试，所以它工作。

推荐阅读