javascript - 有没有更好的方式来发送表单数据？

Question

我尝试使用以下方法通过 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)
      })

Answer 1

首先，我建议将所有这些单独的数据模型嵌套在一个数据模型下，如下所示:

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 .

祝你编码愉快!