Vue 3 Forms : Submitting Forms

In the current state of frontend development, the most common approach to submitting form data to our backend is through XMLHTTPRequests or XHR for short.

현재 프론트엔드 개발 상태에서 백엔드에 form 데이터를 제출하는 가장 일반적인 접근 방식은 XMLHTTPRequests 또는 줄여서 XHR을 사용하는 것임.

 

Axios is a library that will allow you to create XHR requests without having to deal with the vanilla XHR JavaScript API.

Axios는 바닐라 XHR JavaScript API를 처리하지 않고도 XHR 요청을 생성할 수 있게 해주는 라이브러리임.

 

First things first

The default behavior of a form in HTML is to send a bunch of data into a specified URL by triggering a browser navigation event. What this means is that without the use of a library like Axios, your HTML forms will by default make the browser load a completely new page.

HTML form의 기본 동작은 브라우저 탐색 이벤트를 트리거하여 일련의 데이터를 지정된 URL로 보내는 것임. 이것이 의미하는 바는 Axios와 같은 라이브러리를 사용하지 않고, HTML form은 기본적으로 브라우저가  완전히 새로운 페이지를 load 하는 것임.

 

Every. Single. Form. Needs a wrapping <form> tag. Screen readers often switch to “Forms Mode” when they are processing content within a <form> element.

모든 single form 은 . 래핑된  <form> 태그가 필요하다.. 스크린 리더가 <form> 요소 내의 콘텐츠를 처리할 때  종종 Form Mode 로 전환된다.

 

The submit event

This modifier will call preventDefault on the submit event for us, so that our sendForm method can focus exclusively on the logic of submitting our form, and not on event handling.

Setting preventDefault on a submit event for a form element will block the default behavior of having the form submit the data by itself and reloading the browser. We want to keep  control on how our form is being processed, and we want 

to post our data using Axios.

preventDefault 은 sendForm method 가 event handling 보다는 form 을 submission 하는 데에만 집중할 수 있게 한다. 다시 설명하면 data 를 submission 하고  browser 를 reloading 하는 것을 못하게 하는 대신 form 이 data 를 처리하고  Axion 를 이용한 data posting 에 집중하게  한다.

 

SimpleForm.vue

  methods: {
    sendForm (e) {
      axios.post('https://my-json-server.typicode.com/Code-Pop/Vue-3-Forms/events', this.event)
        .then(function (response) {
          console.log('Response', response)
        })
        .catch(function (err) {
          console.log('Error', err)
        })
    }
  }

 

Setting up Axios and our API

SimpleForm.vue

<script>
import axios from 'axios'
export default {
 [...]
}
</script>

 

fake backend를 위하여 my-jsonserver.typicode.com site 의 다음과 같은 REST API 를 이용하였다. https://my-jsonserver.typicode.com/Code-Pop/Vue-3-Forms/

 

Browser 의 network tab 을 보면 submission 시 REST API end point 로 넘어가는 data 를 확인할 수 있다. console  tab 을 보아도 log message 에 response 값이 찍히는 것을 볼 수 있다.

 

 

https://github.com/pidokige02/Vue-3-Form-demo/tree/L6_lesson

GitHub - pidokige02/Vue-3-Form-demo