Форма на vue. Как правильно?

Question

[Виталий Б]

Рассматриваю пример отправки формы на сервер.
В данном примере смущают части:

data() {
    return {
      name: '',
      email: '',
      caps: '',
      response: '',
      activeClass: 'active'
    }

И

name: this.name,
        email: this.email,
        caps: this.caps

Есть ли варианты сократить количество кода?
Как правильно объявить в data массив/объект, в который по submit/click поместить объект с данными полей формы вида {ключ: значение}?
Сериализация в vue возможна?

В целом vue может помочь сократить количество кода или даст ли более понятное ориентирование в коде?
Пишу проект в котором много данных, много таблиц, форм и различных динамических элементов. Начинал на jQuery, постепенно переходя к чистому js. Но уже бывает сложно ориентироваться в коде. Хочется как-то проще писать. И если не меньше кода, то хотя бы чтобы логику проекта упростить. А то с экспериментами по решению одинаковых задач разными способами уже сам бывает путаюсь в итогом коде.

<div id="app">
  <form @submit.prevent="submitForm">
    <div>
      <label for="name">Name:</label><br>
      <input id="name" type="text" v-model="name" required/>
    </div>
    <div>
      <label for="email">Email:</label><br>
      <input id="email" type="email" v-model="email" required/>
    </div>
    <div>
      <label for="caps">HOW DO I TURN OFF CAPS LOCK:</label><br>
      <textarea id="caps" v-model="caps" required></textarea>
    </div>
    <button :class="[name ? activeClass : '']" type="submit">Submit</button>
    <div>
      <h3>Response from server:</h3>
      <pre>{{ response }}</pre>
    </div>
  </form>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      name: '',
      email: '',
      caps: '',
      response: '',
      activeClass: 'active'
    }
  },
  methods: {
    submitForm() {
      axios.post('//jsonplaceholder.typicode.com/posts', {
        name: this.name,
        email: this.email,
        caps: this.caps
      }).then(response => {
        this.response = JSON.stringify(response, null, 2)
      })
    }
  }
})

Answer 1

[Rsa97]

data() {
    return {
      formData: {
        name: '',
        email: '',
        caps: ''
      },
      response: '',
      activeClass: 'active'
    }
  },

submitForm() {
   axios.post('//jsonplaceholder.typicode.com/posts', this.formData)
}

Ну и, соответственно, v-model="formData.name" и т.п.

Comments

[Виталий Б]

То есть в data так или иначе придётся каждое поле описать?
Нельзя пройтись циклом по форме формируя объект object = {name: value, ...} и object уже передать в запрос. Например форма на 20 полей.
Это каждое поле указать в дата и в каждом поле указать v-model. Не хочется наступать на грабли или писать говнокод. Хотелось бы так сказать увидеть правильное решение. Или алгоритм такого решения.

[Rsa97]

Виталий Балахнин, Так реактивность - это как раз основа Vue. В данном случае значение поля формы связывается в обе стороны с элементом данных компонента. При изменении поля меняются данные, при изменении данных изменяется поле.
JS-скрипт компонента работает только с данными, шаблон только реактивно отображает (в форме - изменяет) данные.

Answer 2

[Михаил]

Можно так:

submitForm() {
   const { name, email, caps } = this;
   axios.post('//jsonplaceholder.typicode.com/posts', {
     name,
     email,
     caps,
   })
}