javascript Error - Uncaught(in promise)TypeError:无法读取未定义的属性“data”

7cjasjjr  于 2023-05-21  发布在  Java
关注(0)|答案(3)|浏览(170)

我正在开发vue.js项目,我得到了一个错误。
Uncaught(in promise)TypeError:无法读取未定义的属性“data”
这里是代码。
我将表单数据传递给User类。

Login.vue

<script>
 export default {
     data(){
         return {
             form :{
                 email:null,
                 password:null
             }
         }
    },
    methods:{
        login(){
            User.login(this.form)
        }
    }
}
</script>

这是User类

用户名.js

class User {
  login(data){
      axios.post('/api/auth/login',data)
          .then(res => this.responseAfterLogin(res))
          .catch(error => console.log(error.response.data))
  }
}
export default User = new User();

但是,当我将登录方法移到Login.vue并且不使用User类时,没有发生错误。

Login.vue

<script>
 export default {
     data(){
         return {
             form :{
                 email:null,
                 password:null
             }
         }
    },
    methods:{
        login(){
            axios.post('/api/auth/login',this.form)
            .then(res => console.log(res.data))
            .catch(error => console.log(error.response.data))
        }
    }
}
 </script>

请解释为什么以及如何将数据传递给User类?

6tr1vspr

6tr1vspr1#

不确定API返回的数据是什么,但尝试记录res或错误,然后才能看到数据结构。

axios.post('/api/auth/login',this.form)
.then(res => console.log(res, 'success'))
.catch(error => console.log(error, 'error'))
jv4diomz

jv4diomz2#

class User {
    login(data) {
        axios.post('/api/auth/login', data)
            .then(function(response) {
                console.log(response.data)
            })

        .catch(function(errors) {
            console.log(errors.response.data);
        })
    }
}
export default User = new User()

login() {
         User.login(this.form)
}
o7jaxewo

o7jaxewo3#

你的API可能会返回一个空值,(错误的密码/用户名,就像我的情况一样)。
我所做的是用条件验证,如果是,则重定向,仅此而已。代码如下:

console.log(data);
         if (data == null) {
          console.log("paila bro");
          window.location.href = '/'
         }

该部分:window.location.href = '/'可以替换为不同类型的操作。

相关问题