Как реализовать frontend часть отправки формы на Vue.js?

Question

[gitdev]

Есть ли хороший пример отправки формы(связывание данных формы и отправка post запроса с данными на сервер) ?

Comments

[Алексей Ярков]

Неверная постановка вопроса. Вариантов миллион просто.
Вы покажите что у вас уже есть, а мы поможем.

Answer 1

[askhat]

<template>
  <form>
    <p v-if='errorMessage'>{{ errorMessage }}</p>
    <input type='text' v-model='username'/>
    <input type='password' v-model='password'/>
    <button @click='send()'>Log in</button>
  </form>
</template>

<script>
import someHttpClient from 'someHttpClient'

export default {
  data: {
    return {
      username: '',
      password: '',
      errorMessage: ''
    }
  },
  methods: {
    send () {
      var username, password, errorMessage = this
      if (username && password) {
        errorMessage = ''
        someHttpClient.sendAndMaybeCipher({ username, password })
      } else {
        errorMessage = 'Form not filled properly'
      }
    }
  }
}
</script>

Примеры запроса:

• Чем отличается ajax-запрос post от get?
  
• Какое значение из input type=file передавать на сервер?
  
  

Comments

[Dima Polos]

Для корректной работы надо создать watch, так как отправка запроса это ассинхронное действие.

[askhat]

Dima Polos, можно подробнее?

[Dima Polos]

Askhat Bikmetov, вы в проекте vuex или vue-resource используете?

[askhat]

Dima Polos, разве это важно какая в проекте стейт-машина и какой http клиент? Мне интересно как выглядит техника с watch, т.к. предложенный мной вариант слишком императивен.

[Dima Polos]

Askhat Bikmetov, просто если вы пишете с vuex, то вызов аякса надо делать в store через actions, если вы не используете для данного компонента склад, то вызов аякса будет через родителя и потом пропсами спускаться в ребенка. Если вы используете vue-resource, то там сам запрос немного по-другому пишется. Я постараюсь сегодня описать это, но позже, есть свои проекты, дедлайн горит, на досуге с радостью напишу.

[Dima Polos]

Askhat Bikmetov, https://ru.vuejs.org/v2/guide/computed.html#%D0%9C...
Здесь в документации подробно описано. Суть в том, что в вотче на определенное поле создаем функцию, как компьютед, и уже эта функция из вотча вызывает метод, а в методе сам аякс и так далее, и отслеживать все изменения мы делегируем вотчеру, тогда не будет проблем с реактивностью при ассинхронном коде.

[gitdev]

Как реализовать запрос на сервер?

export default {
        //el: "#form_review_container",
        name: 'reviewForm',
        data() {
            return {
            name: "",
            phone: "",
            email: "",
            text: ""
            }
        },
        methods: {
            form_review: function(event){
                event.preventDefault();
                if (this.name === "" || this.phone === "" || this.email === "" || this.text === ""){
                    this.error = "Заполните все поля.";
                } else {
                    //TODO post request
                }
            }
        }
    }

[askhat]

Dima Polos, перечитал. Как я понимаю, watch это как computed только наоборот. И это не совсем то, что, на мой взгляд, спрашивал gitdev. Ему нет необходимости постоянно обновлять состояния удалённого объекта формы, а надо лишь один раз отправить форму.
Техника watch хорошо подойдёт для fuzzy поиска, или друго итнтеракитва, типа ГИС сервиса или онлайн–игры.
Что касается вопроса «где держать асинхронные методы?», то я согласен, что с vuex они должны быть в actions, в остальном это дело вкуса, архитектуры и дальновидности разработчика—асинхронные методы могут быть там, где они могут быть.
Таким образом заключаю: предложенный мной вариант идеально вписывается в задачу «достигли валидного состояния формы—один раз отправили».

[askhat]

gitdev, предположим что вы не используете никаких сторонних http–клиентов:

...
else {
  var vm = this
  var xhr = new XMLHttpRequest()
  var xhr.open('POST', '/form_route', true)
  xhr.onreadystatechange = function () {
    if (xhr.status === 200) {
      // do stuff
    } else {
      // do stuff with error
    }
  }
  xhr.send(JSON.stringify({
    username: vm.username,
    password: vm.password
  })
}
...

[Dima Polos]

Askhat Bikmetov, в принципе да, согласен)

[gitdev]

Askhat Bikmetov, реализовал через axios