3

<script>
export default {
  name: 'cart',
  components: {},
  data() {
    return {}
  },
  methods: {
    sendForm() {
    //?????
    }
  },
}
</script>
form {
    flex-basis: 30%;
    box-shadow: 0 0 8px 0 #e0e0e0;
    height: 330px;
}
.form__wrap {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    margin: 0 auto;
}
.form__wrap input {
    padding: 10px;
    margin-top: 20px;
}
.form__wrap input[type="submit"] {
      border: none;
      transition: 0.3s;
      padding: 15px;
    }
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<form 
 action=""
 @submit="sendForm"
>
  <div class="form__wrap">
    <input type="text" name="name" placeholder="Name">
    <input type="text" name="surname" placeholder="Phone">
    <input type="submit" name="submit" value="Send">
  </div>
</form>

1 ответ 1

3
  1. на поля формы вешаете v-model как свойства объекта form из data;
  2. в action для HTML <form> прописываете URL сервера, который будет принимать ваш JSON;
  3. используя обычный fetch вы можете отправить ваш JSON приведенным ниже способом.

В примере используется https://jsonplaceholder.typicode.com/posts как адрес сервера, необходимо изменить на ваш URL

Больше о fetch по ссылке

const app = new Vue({
  el: '#app',
  data() {
    return {
      form: {}
    }
  },
  methods: {
    sendForm(e) {

      // отменяем действие по умолчанию для кнопки Send 
      e.preventDefault()
      console.log('Отправка JSON данных', this.form)

      // используя fetch формируем запрос
      fetch(
        // URL куда будем отправлять запрос
        e.target.action,
        // параметры запроса
        {
          method: 'POST', // *GET, POST, PUT, DELETE
          mode: 'cors', // no-cors, *cors, same-origin
          cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
          credentials: 'same-origin', // include, *same-origin, omit
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(this.form) // тип данных, должен соответствовать "Content-Type"
        }
      ).then(
        function(response) {
          // успешно получен ответ сервера на запрос
          console.log('Ответ сервера', response);
        },
        function(error) {
          // Ошибка при осуществлении запроса
          console.error(error);
        }
      );

    }
  },
})
form {
  flex-basis: 30%;
  box-shadow: 0 0 8px 0 #e0e0e0;
  height: 330px;
}

.form__wrap {
  display: flex;
  flex-direction: column;
  max-width: 80%;
  margin: 0 auto;
}

.form__wrap input {
  padding: 10px;
  margin-top: 20px;
}

.form__wrap input[type="submit"] {
  border: none;
  transition: 0.3s;
  padding: 15px;
}


}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <form action="https://jsonplaceholder.typicode.com/posts" @submit="sendForm">
    <div class="form__wrap">
      <input type="text" v-model="form.name" name="name" placeholder="Name">
      <input type="text" v-model="form.surname" name="surname" placeholder="Phone">
      <input type="submit" name="submit" value="Send">
    </div>
  </form>
</div>

2
  • Спасибо, все работает. Как можно сохранить не на сервер а в файл?
    – Primo
    8 сен 2020 в 16:06
  • если вы имеете ввиду на клиенте - прочтите вот этот ответ stackoverflow.com/questions/48611671/… 8 сен 2020 в 16:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.