报错信息:
Uncaught TypeError: Cannot read properties of undefined (reading 'post')
报错截图:
login.vue 代码:
<template>
<div id="login_header">欢迎登录</div>
<div id="login_container">
<el-form :model="form" label-width="120px">
<el-form-item label="用户名">
<el-input v-model="form.username" />
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.password" type="input" placeholder="Please input password" show-password/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">登录</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
// eslint-disable-next-line vue/multi-word-component-names
name:'Login',
data(){
return {
form:{
username:'',
password:''
}
}
},
methods:{
onSubmit(){
console.log('用户名:'+this.form.username)
//使用axios把前端请求发送到后端
this.$axios.post('http://localhost:8081/login',
{'username':this.form.username,'password':this.form.password})
.then(res => {
console.log(res)
})
}
}
}
</script>
<style scoped>
#login_container{
width: 40%;
margin: 0 auto;
}
#login_header{
text-align: center;
margin-top: 50px;
margin-bottom: 30px;
font-size: 25px;
color: #42b983;
}
</style>
经检查发现,2个问题:
- 没有引入axios:
import axios from 'axios'
- Vue3 引用代码不同于Vue2。改成
axios.post('http://localhost:8081/login', {'username':this.form.username,'password':this.form.password}) .then(res => { console.log(res) })
修改后,解决问题。
<template>
<div id="login_header">欢迎登录</div>
<div id="login_container">
<el-form :model="form" label-width="120px">
<el-form-item label="用户名">
<el-input v-model="form.username" />
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.password" type="input" placeholder="Please input password" show-password/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">登录</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import axios from 'axios'
export default {
// eslint-disable-next-line vue/multi-word-component-names
name:'Login',
data(){
return {
form:{
username:'',
password:''
}
}
},
methods:{
onSubmit(){
console.log('用户名:'+this.form.username)
//使用axios把前端请求发送到后端
axios.post('http://localhost:8081/login',
{'username':this.form.username,'password':this.form.password})
.then(res => {
console.log(res)
})
}
}
}
</script>
<style scoped>
#login_container{
width: 40%;
margin: 0 auto;
}
#login_header{
text-align: center;
margin-top: 50px;
margin-bottom: 30px;
font-size: 25px;
color: #42b983;
}
</style>