Javascript 从js导入内部进行Vue.js异步更新

我有两个表单组件，它们有一个通用的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
}

试试这个

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

及

或者，处理异步调用的传统方法是在需要编辑的变量上传递具有闭包的回调

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

---

此外，他还可以使用

Vue.set（vueInstance，'validEmail'，response）
watch: {
    'email': function (val) {
       validateInput('email', val,function(response){this.validEmail=response})
    }
  }
  //...
  validateInput('email', val, cb)
  //...
  success(response) {
    cb(response);
  }