vue + iview 为什么表单校验为true，代码却不向下执行？

Z时代
2024-03-04
分类：IT

iview 的动态表单，valid: true，方法却不向下执行，如下：

    handleSave () {
      this.$refs['model'].validate(function (valid) {
        console.log('valid:', valid)    // 打印为：valid: true
        if (valid) {
             console.log('校验成功)     // 执行不到
         }
      })    }

回答：

这个问题可能是由于 Vue的异步更新队列导致的。Vue 在观察到数据变化时，不会立即更新 DOM，而是开启一个异步队列，并缓冲在同一事件循环中发生的所有数据改变。在下一个事件循环 "tick" 时，Vue 刷新队列并执行实际（已去重）的工作。所以可能是由于在校验的回调函数中，if (valid) 这个判断还没有得到正确的值。你可以这样修改你的 handleSave 方法：

handleSave () {
  this.$refs['model'].validate((valid) => {
    console.log('valid:', valid) // 打印为：valid: true
    if (valid) {
      this.$nextTick(() => {
        console.log('校验成功') // 应该可以执行到
      });
    }
  })
}

这样，console.log('校验成功') 应该可以被执行。

回答：

在 Vue.js 中，validate 方法通常是异步的，它会返回一个 Promise，因此需要等待校验结果返回后才能执行下一步操作。在您的代码中，可能出现了异步问题，导致校验成功后并没有执行下一步操作。您可以尝试使用 async/await 来解决这个问题，使其同步执行。

示例代码如下所示：

async handleSave() {
  const valid = await new Promise((resolve) => {
    this.$refs['model'].validate((valid) => {
      resolve(valid)
    })
  })
  console.log('valid:', valid)
  if (valid) {
    console.log('校验成功')
    // 执行下一步操作
  }}

在这个示例中，使用了 async/await 关键字，将 handleSave 方法声明为异步函数。在方法中，先通过 validate 方法获取校验结果 valid，然后在校验结果返回后，判断结果是否为 true，并执行后续操作。

可以看到，这里使用了一个 Promise 对象将 validate 方法包装起来，并通过 await 关键字等待结果返回。在 Promise 对象中，调用 resolve 方法返回校验结果 valid，这样外部的 async/await 方法就能够等待校验结果的返回了。

注意，await 关键字只能在异步函数中使用，因此需要将 handleSave 声明为异步函数。同时需要注意，validate 方法调用后并不是立即返回校验结果，而是具有一定的延迟，因此需要通过 Promise 对象来等待校验结果的返回。