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

试试这个

$yesterday = new DateTime('yesterday');
echo $yesterday->format('Y-m-d');

$firstModayOfApril = new DateTime('first monday of april');
echo $firstModayOfApril->format('Y-m-d');

$nextMonday = new DateTime('next monday');
echo $nextMonday->format('Y-m-d');

和

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
}

来自JS导入的Vue.js异步更新

1 个答案: