从内部 JS 导入 Vue.js 异步更新

Question

我有两个表单组件，它们有一个通用的 JS 验证器。

import { validateInput } from './validateInput.js'

export default {
  data () {
    return {
      email: 'a@a.com',
      validEmail: false
    }
  },
  methods: {
    validateInput
  },
  watch: {
    'email': function (val) {
       this.validEmail = validateInput('email', val)
                         // ^ makes async request
    }
  }
}

验证器使用jQuery.ajax - 对服务器的异步 HTTP 请求。问题是，由于validateInput() 是异步的，它会在收到服务器响应之前返回（this.validEmail 未定义） 这个JS导入函数中的异步请求完成后如何更新Vue实例（this.validEmail）？

简单来说 - 我如何以异步方式从 validateInput 内部访问 Vue 实例？

我尝试将 Vue 实例作为参数传递，但没有更新：

validateInput('email', val, this)
----
// validateInput.js
email() {
  $.ajax({
    ...
    success(response) {
      vueInstance.validEmail = response   // doesn't work
    }
  })
  vueInstance.validEmail = false
         // ^^^^ this works
}

Answer 1

试试这个

watch: {
    'email': function (val) {
       validateInput('email', val,this)
    }
  }

和

validateInput('email', val, ref)
----
// validateInput.js
email() {
  $.ajax({
    ...
    success(response) {
      ref.validEmail = response   // doesn't work
    }
  })
         // ^^^^ this works
}

或者处理异步调用的传统方法是传递一个回调，该回调对需要编辑的变量有一个闭包。

watch: {
    'email': function (val) {
       validateInput('email', val,function(response){this.validEmail=response})
    }
  }
  //...
  validateInput('email', val, cb)
  //...
  success(response) {
    cb(response);
  }