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

Posted 2023-02-23

【中文标题】VueJS验证没有触发第一次调用

【英文标题】：VueJS Validation not firing the first call

【发布时间】：2020-08-03 11:03:45

【问题描述】：

好的，所以我有一个验证，我正在从输入框中调用模糊。我传递了 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 

【问题讨论】：

让 VueJs 为你做所有的 DOM 修改。尽量不要将直接 DOM 修改与 VueJs DOM 修改混为一谈。您可以将组件的数据部分中的一些道具绑定到按钮的“禁用”道具，然后更改此道具以立即反映更改。

第一次显示验证有什么帮助吗？

第一次蓝色事件时是否调用了limitChecking？

@Anatoly 是的，如果我添加第一次调用的警报或控制台日志但 Bootstrap Vue Popover 不是。

【参考方案1】：

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

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

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

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

【讨论】：

更正 @blur 在模板中被调用，但我通过 mixin 引入了这个方法，因为它被用于此页面的 3 个不同视图。但是mixin是数据之后的方法。嗯