延迟Vuelation验证，直到从远程API获取数据
我已经在输入字段上使用非常简单的验证的vuelaties添加了Quasar 2应用程序。该验证本身可以正常工作，但这是我的问题：
该组件的on monted函数从API中获取了一些数据。该数据最初用于填充表单。但是，在加载时间内，将输入字段评估为无效。只有数据到达后，输入字段就会有效。
API调用完成后，是否只能启动验证？
请参阅CODESANDBOX上的以下示例，该示例通过添加5秒钟的超时：
https://codesandbox.io/s/condescending-fast-h7ld0c?file=/src/pages/index.vue
I have added Vuelidate to my Quasar 2 application with a very simple required validation on an input field. The validation itself works fine but here's my problem:
The component's fetches some data from an API in its onMounted function. This data is used to initially populate the form. For the time loading, however, the input field is evaluated as invalid. Only once data have arrived, the input field becomes valid.
Is it possible to start the validation only once the API call has finished?
Please see the following example on Codesandbox which "simulates" the loading process by adding a timeout of 5 seconds:
https://codesandbox.io/s/condescending-fast-h7ld0c?file=/src/pages/Index.vue
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这是异步验证的一种情况。
我对您的需求类似：在我的情况下，从一个下拉列表中选择一个值会触发HTTP请求以在另一个下拉列表中动态填充选项。我的验证条件是，匹配其动态选项之一所需的第二个下拉列表中所选值。
在您的情况下，您应该使用
helpers.withasync（）告诉Vuelidate在应用验证之前等待后端呼叫的结果。如果您的ASYNC验证器函数返回验证结果，即用户输入一个值，并且您将该值带到某个端点，以返回true 或false。在您的情况下，这不太直观，因为您正在等待的异步操作正在返回一个值，您需要针对应用验证，而不是验证本身的结果。
这是 codesandbox 我创建了为探索这种风景。您需要查看情况2和案例3。
在情况3中，特别是我在嘲笑后端以获取新的下拉列表选项的地方。在情况3中应用的验证方法称为
asyncincludes（），这是事情变得有些棘手的地方。因为我的验证依赖于后端呼叫，但是后端呼叫没有返回验证结果本身，所以我存储了由
oigfetch（）返回的承诺并在其值更改时重新验证验证。为了观察Vuelidate验证器中的反应性值，该库需要将验证器函数包装在
helpers.withparams（）中。这会自动需要将验证器写为高阶函数，该功能接受参数为参数（在本例中为Promise）并返回验证器函数。然后，在
helpers.withparams（）中，我提供了一个包裹在helpers.withasync（）的异步验证器，以等待传递给asyncincludes 在应用验证之前。结果是，每当相应的HTTP调用被触发时，结果承诺都存储在Vuelidate观察的变量中，该变量重新限制了验证器。碰巧的是，验证器是异步的，并且将在评估验证条件并返回结果之前等待承诺解决的承诺。
$ errorvuelidate提供的属性是代表。$ nivecalid，。$ dirty和。代码>。异步验证器update$待处理，vuelidate将暂停$ error状态，而$ pending是正确的（即，在您的异步操作发生时）。希望这有帮助！
This is a case for async validation.
I had a similar need to yours: in my situation, selecting a value from one dropdown would trigger an HTTP request to dynamically populate options in another dropdown. My validation condition was that the selected value in the second dropdown needed to match one of its dynamic options.
In your case, you should be using
helpers.withAsync()to tell Vuelidate to await the results of the backend call before applying validation. This helper is pretty intuitive in the case that your async validator function returns a validation result, i.e. the user inputs a value and you make a request with that value to some endpoint that returnstrueorfalse.It's less intuitive in your case, because the async operation you're awaiting is returning a value that you need to apply validation against, not the result of the validation itself.
Here's a CodeSandbox I created to explore this scenario. You'll want to look at Case 2 and Case 3.
In Case 3, specifically, is where I'm mocking a call to the backend to fetch new dropdown options. The validator method that's applied in Case 3 is called
asyncIncludes(), and this is where things get a little tricky.Because my validation relies on a backend call, but the backend call doesn't return the validation result itself, I had store the promise returned by the
mockFetch()in a variable and instruct Vuelidate to watch that binding and re-fire the validation when its value changes.In order to watch a reactive value within a Vuelidate validator, the library requires wrapping the the validator function in
helpers.withParams(). This automatically necessitates writing the validator as a higher order function, which accepts a param as argument (in this case the promise) and returns a validator function.Then, within
helpers.withParams(), I provide an async validator wrapped inhelpers.withAsync()to await the result of the promise passed toasyncIncludesbefore applying the validation.The result is that anytime the respective HTTP call is fired, the resulting promise is stored in a variable watched by Vuelidate, which re-fires the validator. It just so happens that the validator is async and will wait for the promise to resolve before evaluating the validation condition and returning the result.
The
$errorproperty provided by Vuelidate is a a convenience property that represents.$invalid,.$dirtyand.$pending. Async validators update$pendingand Vuelidate will suspend the$errorstate while$pendingis true (i.e. while your async operation is taking place).Hope this helps!
我更改了
v-Model属性以使用Vuelidate的属性，此外，使用$ error属性而不是$ $ nivalid。这似乎有效，也就是说，该字段最初已验证，直到获取数据为止。如果用户清除字段，则将变得无效。
https：/ -forest -7U0916？file =/src/pages/index.vue
I changed the
v-modelattribute to use that of Vuelidate and, additionally, use the$errorproperty instead of$invalid.This seems to work, that is, the field is initially validated until the data have been fetched. If the user then clears the field, it becomes invalid.
https://codesandbox.io/s/prod-forest-7u0916?file=/src/pages/Index.vue