如何使用 vee-validate 驗證所有引用？

Question

我有需要驗證的動態組件。

我有一個數組，我把我的組件推到那里。 for 循環效果很好。

    validateForm() {
      const PROMISES = [this.$refs.contactDetailsForm.$refs.contactDetails]
      for (let i = 1; i <= this.count; i++) {
        PROMISES.push(this.$refs[`passengerForm${i}`][0])
      }


      return Promise.all(PROMISES)
    },

但問題是我不知道如何返回驗證結果。 我想在另一個函數（Promise）中得到這個函數的結果。 我怎樣才能做到這一點？

Answer 1

這是解決方案：

    validateForm() {
      const PROMISES = [this.$refs.contactDetailsForm.$refs.contactDetails]
      for (let i = 1; i <= this.count; i++) {
        PROMISES.push(this.$refs[`passengerForm${i}`][0])
      }

      return new Promise((resolve, reject) => {
        PROMISES.forEach(async (item) => {
          const STATUS = await item.validate()
          STATUS ? resolve(STATUS) : reject(STATUS)
        })
      })
    }

Answer 2

未經測試，但 Promise.all 返回承諾的結果數組。 你需要做的是為所有你想知道結果的事情觸發驗證，收集這些承諾，然后在 Promise.all 中檢查結果。 你沒有提供足夠的代碼來完全回答這個問題，但它是這樣的：

validateForm() {
  //both of these I added validate() to because I'm hoping they are references to ValidationObservers
  const PROMISES = [this.$refs.contactDetailsForm.$refs.contactDetails.validate()]
  for (let i = 1; i <= this.count; i++) {
    PROMISES.push(this.$refs[`passengerForm${i}`][0].validate())
  }

  return Promise.all(Promises);
}

然后無論你在哪里調用它，你都會這樣做：

this.validateForm().then((values) => {
    this.formIsValid = values.every((result) => result));
    //if the things above are ValidationProviders rather than VO, you have to use result.valid instead of result
});