具有范围的 Vee-Validate validateAll()答案

【问题标题】：Vee-Validate validateAll() with scope具有范围的 Vee-Validate validateAll()
【发布时间】：2018-08-08 12:24:10
【问题描述】：

我有一个场景，我已经分段（限定）了一个表单，以便我可以使用以下函数一次验证小块。

validateScope (scope) {
  return this.$validator.validateAll(scope);
}

我想在将整个表单提交到服务器之前对其进行最后一次验证；但是， validateAll() 似乎没有拾取已添加到范围的输入。我也尝试过验证每个范围，然后如果它们都有效则提交表单，但我不知道该怎么做，因为一切都是异步的。

validateAll () {
   let valid = true;

   // Not sure how to build this function since validateScope is asynchronous
   _.each(this.names, (name, index) => {
     if(this.validateScope('name-' + index)){
       valid = false;
     }
   });

   return valid; // Always returns true even though the _.each should set it to false
}

【问题讨论】：

“拾取已添加到范围的输入。”您如何将输入添加到范围？
您将需要使用类似Promise.all 的方式收集从validateScope 返回的所有promise，然后评估其中一个是否返回false。如果您想设置一个工作示例，生成答案会更容易。
代码中的异步部分在哪里？
@bergi $validator.validateAll 是一个 VeeValidate 库函数，它返回一个承诺。
@Bert 啊，我还以为是第二个sn-p里贴出来的函数……

标签： javascript vue.js promise vee-validate

【解决方案1】：

正如我在评论中提到的，您的代码最终会看起来像这样：

validateAll () {
   let valid = true;

   let validations = []
   _.each(this.names, (name, index) => {
     validations.push(this.validateScope('name-' + index))
   });

   return Promise.all(validations)
     // consolidate the results into one Boolean
     .then(results => results.every(r => r))
}

那么，当然，您必须使用validateAll 作为承诺：

this.validateAll().then(isValid => {
  if (!isValid) {
    //do whatever you need to do when something failed validation
  } else {
    // do whatever you need to do when everything is valid here
  }
})

【讨论】：

非常感谢！这正是我一直在寻找的。像魅力一样工作。
这是否适用于 vee-validator？ this.$validator 引用了该库中的一个对象