我尝试使用以下方法通过 axios
发送表单数据。但我想知道是否有更好的方法来发送表单数据,以便我的代码看起来标准,代码行数更少。
HTML 代码
<input type="text" class="forms__first" placeholder="First Name*" v-model="firstName">
<input type="text" class="forms__last" placeholder="Last Name*" v-model="lastName">
<input type="email" class="forms__email" placeholder="Email*" v-model="email">
<input
type="text"
class="forms__number"
placeholder="Phone Number (Optional)"
v-model="number"
>
<input
type="text"
class="forms__add"
placeholder="Address (e.g: Shankhamul, Kathmandu)"
v-model="address"
>
脚本代码
sendUserInfo () {
axios
.post('/formdata/store', {
first_name: this.firstName,
last_name: this.lastName,
email: this.email,
phone_no: this.number,
address: this.address
})
.then(res => {
alert('successfully posted')
})
.catch(err => {
console.log(err)
})
最佳答案
首先,我建议将所有这些单独的数据模型嵌套在一个数据模型下,如下所示:
data() {
return {
user: {
firstName: '',
lastName: '',
email: ''
}
}
}
这将允许您将 html 中的内容引用为
<input type="text" class="forms__first" placeholder="First Name*" v-model="user.firstName">
但好处在于您的 sendUserInfo
函数,您将实现“我的代码用更少的代码行看起来很标准”的目标:
sendUserInfo () {
axios
.post('/formdata/store', this.user)
其次,如果您的代码可以正常工作,那么这个问题就没有真正的问题需要解决。然后,我建议您更彻底地查看 VueJS 官方指南,尤其是 Cookbook,以了解应如何解决常见的编码挑战。这是Axios recipe .
祝你编码愉快!
关于javascript - 有没有更好的方式来发送表单数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55722509/