Question

一个奇怪的人。我正在将Vue.js与php后端一起使用。然后发送以下信息：

validateEmail(){                        
        if(!this.emailModel.loading && this.$refs.emailForm.validate())            
        {                
            this.emailModel.loading = true;
            var url = 'https://exampleurl' + this.emailModel.email;
            axios.get(url).then((response) => {                                   
                    if(response.data.success == true)
                    {                            
                        this.companyModel.companyName = response.data.name;
                        this.companyModel.readOnly = true;
                        this.emailModel.loading = false;                            
                        this.$refs.wizard.changeTab(0,2);
                    }   
                    else
                    {                            
                        this.emailModel.loading = false;
                        this.$refs.wizard.changeTab(0,1);
                    }                     
                })
                .catch(e => {
                    // eslint-disable-next-line no-console
                    console.error(e);
                })                
        }   
        else
        {
            return false;
        }         
    },

它有效！就像在电子邮件发送到服务器，该服务器查找域并返回公司名称（如果有）。名称将填写在输入中，并且输入被设置为只读。因此，一切似乎都很好，但我不断得到：

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'then' of undefined"

found in

---> <FormWizard>
       <Register> at src/views/Register.vue
         <App> at src/App.vue
           <Root> warn @ vue.runtime.esm.js?2b0e:619 logError @ vue.runtime.esm.js?2b0e:1884 globalHandleError @ vue.runtime.esm.js?2b0e:1879 handleError @ vue.runtime.esm.js?2b0e:1839 invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862 invoker @ vue.runtime.esm.js?2b0e:2179 original._wrapper @ vue.runtime.esm.js?2b0e:6911 vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'then' of undefined
    at s (vue-form-wizard.js?fc12:1)
    at VueComponent.validateBeforeChange (vue-form-wizard.js?fc12:1)
    at VueComponent.beforeTabChange (vue-form-wizard.js?fc12:1)
    at VueComponent.nextTab (vue-form-wizard.js?fc12:1)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLSpanElement.invoker (vue.runtime.esm.js?2b0e:2179)
    at HTMLSpanElement.original._wrapper (vue.runtime.esm.js?2b0e:6911)

我不喜欢代码中的错误，也不喜欢在不了解原因的情况下捕获它们。任何能够教育我并帮助解决此问题的人！

感谢您的努力。

Answer 1

before-change 事件期望返回 Promise，因此您需要将代码包装在 Promise 函数中，并在通过验证时调用 resolve()。

validateEmail(){                        
    return new Promise((resolve,reject) => {

        if(!this.emailModel.loading && this.$refs.emailForm.validate())            
        {                
            this.emailModel.loading = true;
            var url = 'https://exampleurl' + this.emailModel.email;
            axios.get(url).then((response) => {                                   
                    if(response.data.success == true)
                    {                            
                        this.companyModel.companyName = response.data.name;
                        this.companyModel.readOnly = true;
                        this.emailModel.loading = false;
                        resolve();                            
                        this.$refs.wizard.changeTab(0,2);
                    }   
                    else
                    {                            
                        this.emailModel.loading = false;
                        resolve();
                        this.$refs.wizard.changeTab(0,1);
                    }                     
                })
                .catch(e => {
                    // eslint-disable-next-line no-console
                    console.error(e);
                })                
        }   
        else
        {
            reject();
            return false;
        }
    });         
},

TypeError：无法读取未定义的属性“ then”，但它可以工作

1 个答案: