如何解决如何使用AxiosVueJS,Nuxt制作.post
我是Web开发的新手。我想问一下如何使用Nuxt在Axios上创建.post
。
我所需要的只是一个按钮,它将三个输入发送到NodeJS应用。
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-body">
<form @submit="formSubmit">
<strong>Name:</strong>
<input type="text" class="form-control" v-model="name">
<strong>Email:</strong>
<input type="text" class="form-control" v-model="email">
<strong>Password:</strong>
<input type="text" class="form-control" v-model="password">
<button class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: '',email: '',password: ''
};
},methods: {
//Would like to use the button to do this:
async sendData () {
await this.$axios.get('insert',{
name: this.name,email: this.email,password: this.password })
}
}
}
</script>
谢谢您的帮助。
解决方法
提交侦听器应改为调用该方法:
<form @submit="sendData">
要发送POST
请求:
this.$axios.post('insert',{
name: this.name,email: this.email,password: this.password
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
有关更多信息,您可以访问their page。
,您还可以将axios本地导入到您的组件中,并通过以下方式使用它:
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-body">
<form @submit="formSubmit">
<strong>Name:</strong>
<input type="text" class="form-control" v-model="name">
<strong>Email:</strong>
<input type="text" class="form-control" v-model="email">
<strong>Password:</strong>
<input type="text" class="form-control" v-model="password">
<button class="btn btn-success">Submit</button>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
name: '',email: '',password: ''
};
},methods: {
//Would like to use the button to do this:
async formSubmit() {
await axios.post('route/url',{
name: this.name,password: this.password
})
.then(response => {
console.log(response)
})
.catch(err => {
console.log(err)
})
}
}
}
</script>
不要忘记调用formSubmit
方法来实际发出POST
请求。
此外,您的表单似乎没有结束标签</form>
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。