@vitaliy_balahnin
Новичок в веб-разработке

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

Рассматриваю пример отправки формы на сервер.
В данном примере смущают части:
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)
      })
    }
  }
})
  • Вопрос задан
  • 86 просмотров
Решения вопроса 2
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
data() {
    return {
      formData: {
        name: '',
        email: '',
        caps: ''
      },
      response: '',
      activeClass: 'active'
    }
  },

submitForm() {
   axios.post('//jsonplaceholder.typicode.com/posts', this.formData)
}
Ну и, соответственно, v-model="formData.name" и т.п.
Ответ написан
FFxSquall
@FFxSquall
Могу писать код, могу не писать
Можно так:
submitForm() {
   const { name, email, caps } = this;
   axios.post('//jsonplaceholder.typicode.com/posts', {
     name,
     email,
     caps,
   })
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
МТС Москва
от 150 000 до 180 000 ₽
от 120 000 до 150 000 ₽
Мешок Санкт-Петербург
от 170 000 ₽
18 сент. 2020, в 17:52
1000 руб./за проект
18 сент. 2020, в 17:49
500 руб./в час
18 сент. 2020, в 17:24
180 руб./за проект