Есть ли лучший способ отправить данные формы?

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

Вы можете заключить форму в объект form, который вы можете объявить в разделе data как пустой объект JS.Затем вы просто привязываете атрибуты к этому объекту в шаблоне, используя v-model="form.firstName" и т. Д. Наконец, вы можете просто отправить объект form с аксиосами, используя this.form.

Answer 2

Прежде всего, я бы порекомендовал вкладывать все эти отдельные модели данных в одну модель данных следующим образом:

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, особенно «Поваренную книгу», чтобы понять, как следует решать распространенные проблемы кодирования.Вот рецепт Axios .

Удачного кодирования!

Answer 3

вы можете использовать .serializeArray () для сериализации данных формы для POST

http://api.jquery.com/serializeArray/

var data = $({YOUR_FORM_SELECTOR}).serializeArray();
axios.post('/formdata/store', data)
      .then(res => {
        alert('successfully posted')
      })
      .catch(err => {
        console.log(err)
      })

Если вам не нужен jQuery, используйте FormData класс javascript

var form = document.querySelector({YOUR_FORM_SELECTOR});
var data = new FormData(form);
axios.post('/formdata/store', data)
          .then(res => {
            alert('successfully posted')
          })
          .catch(err => {
            console.log(err)
          })