我已经在我的Quasar 2应用程序中添加了一个非常简单的对输入字段的required验证。验证本身工作良好，但这是我的问题:
组件在其onMounted函数中从API获取一些数据。该数据最初用于填充表单。而对于时间加载，则将输入域计算为invalid。只有当数据到达时，输入字段才有效。
是否可以在API调用完成后才开始验证?
请参阅下面的Codesandbox示例，该示例"模拟"加载过程中添加一个5秒的超时:
https://codesandbox.io/s/condescending-fast-h7ld0c?file=/src/pages/Index.vue
这是一个异步验证的例子。
我有一个类似的需求:在我的情况下，从一个下拉菜单中选择一个值将触发HTTP请求，以动态地填充另一个下拉菜单中的选项。我的验证条件是，第二个下拉框中选择的值需要匹配它的一个动态选项。
在您的示例中，应该使用helpers.withAsync()告诉validate在应用验证之前等待后端调用的结果。当你的异步验证器函数返回一个验证结果时，这个帮助器是非常直观的，即用户输入一个值，你用这个值向返回true或false的端点发出请求。
在您的情况下，它不太直观，因为您正在等待的异步操作返回的值需要对应用验证，而不是验证本身的结果。
下面是我创建的一个CodeSandbox来探索这个场景。你要看看情况2和情况3。在案例3中，具体来说，是我模拟调用后端来获取新的下拉选项。在案例3中应用的验证器方法称为asyncIncludes()，这就是事情变得有点棘手的地方。
因为我的验证依赖于后端调用，但是后端调用本身不返回验证结果，所以我将mockFetch()返回的promise存储在一个变量中，并指示Vuelidate监视该绑定，并在其值更改时重新触发验证。
为了在验证器中观察响应值，库需要在helpers.withParams()中包装验证器函数。这自动要求将验证器编写为一个高阶函数，该函数接受参数作为参数(在本例中是promise)并返回一个验证器函数。
然后，在helpers.withParams()中，我提供了一个封装在helpers.withAsync()中的异步验证器，以便在应用验证之前等待传递给asyncIncludes的承诺的结果。
结果是，每当触发相应的HTTP调用时，生成的承诺存储在由Vuelidate监视的变量中，该变量将重新触发验证器。碰巧验证器是异步的，在计算验证条件并返回结果之前，它将等待promise解析。
Vuelidate提供的$error属性是一个方便的属性，表示.$invalid、.$dirty和.$pending。异步验证器更新$pending和校验将暂停$error状态，而$pending为真(即，当你的异步操作正在发生时)。
希望这对你有帮助!
我将v-model属性更改为使用Vuelidate属性，此外，使用$error属性而不是$invalid。
<q-input
v-model="v$.title.$model"
:error="v$.title.$error"
/>
这似乎可以工作，也就是说，在获取数据之前，该字段最初是经过验证的。如果用户随后清除该字段，则该字段无效。
https://codesandbox.io/s/prod-forest-7u0916?file=/src/pages/Index.vue