Vuelidate在页面加载时多次触发

Posted 2021-04-02

我正在使用Vue，并进行验证，Vuelidate。

当使用执行AJAX调用的自定义验证器时，它会在页面加载时多次触发，甚至在用户交互之前（vuelidate的$touch）。

在第一次加载后进行多次调用后，验证工作正常。 （我在输入更改时使用此验证，使用vue @change）

我尝试设置一个标志isMounted只在整个实例加载后才在自定义验证器内执行验证，但没有成功。

码

验证器（仅用于调试，用于测试）：

validations() {
    return {
        myFieldToValidate(field) {
            test_validation(value) {
                console.log('test validation fired!', Math.random());
                return true;
            }
        }
    }
}

然后，当我重新加载页面时，它会多次触发：

我想仅根据我的事件（输入更改）进行验证“激活”，而不是基于页面加载多次。怎么做到这一点？

答案

@change.once应该做的伎俩

有关更多信息，请参阅链接https://vuejs.org/v2/api/#vm-once

另一答案

我结束了自己的函数，使得ajax调用，与vuelidate分离。我使用lodash' _.debounce来控制通话。

我将函数绑定到@input事件，根据它调用ajax并返回结果的“flag”属性。

然后，我使用此标志来检查字段的有效性。

使用此abordage，事件在页面加载时不会多次触发。