JS内からのVue.js非同期アップデート

Question

私は2つのフォームコンポーネントを持っており、共通の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); 
    }