[Udemy Vue 완벽가이드 Sectio11] 142. v-model 및 입력

아주 기본적인 양식이다.

텍스트를 입력하는 필드, 숫자입력 필드, drop down, checkbox, radio 버튼도 있고, 양식을 제출하는 버튼도 있다.

 

이런 입력란을 어떻게 Vue와 연결할지 살펴보자. 그리고 해당 입력란들로부터 정보를 가져오는 방법도 알아보자.

 

TheForm.vue 마크업이 모두 화면상에 양식을 이룬다.

input들로부터 데이터를 추출하는 작업부터 하자.

우선 데이터를 콘솔에 출력해서 정상적으로 추출되는지 확인해보자.

이 작업을 위해서는 양식을 제출했을 때 트리거되는 메서드가 필요하다. → submitForm 메서드를 추가해보자.

<template>
  <form @submit.prevent="submitForm">
   <!--코드 생략-->
    <div>
     <!--<button @click="submitForm">Save Data</button>-->
      <button>Save Data</button>
    </div>
  </form>
 </template>
 <script>
export default {
  methods: {
    submitForm() {},
  },
};
</script>

 

## form태그 내부의 button 요소

'Save Data' 버튼태그에 click 리스너로 submitForm 메서드를 추가할 수 있다.

하지만 form태그에 있는 button은 해당 양식을 제출하고, form태그의 submit이벤트를 트리거하므로, button의 click 리스너 추가 대신, form태그의 submit 이벤트를 수신하는게 낫다.

<form>의 자식태그 중 <button>요소는 기본 type은 submit. 데이터를 제출하기 위한 버튼으로 지정한다.

즉, 위 "Save Data" button요소는 form태그의 자식태그이므로, 기본 type="submit"이고,

클릭 시, form의 submit메서드와 동일한 역할로 데이터를 제출한다.

따라서, 아래 두 코드는 동일하다.

<form>
 <button @click="submitForm">Save Data</button> //type이 submit
</form>

<form @submit="submitForm">
 <button>Save Data</button>
</form>

 

submit에 prevent 수식어를 추가하여, 양식이 제출되었을때 요청을 전송하는 브라우저의 기본 동작이 일어나지 않게 막을 수 있다.

막지 않으면 요청을 보내고 페이지가 새로고침되어서 결국 Vue앱을 재가동하고, 모든 데이터를 잃게 된다.

 

 

# 입력란 - Vue 연결

이제 다양한 입력란에 Vue를 연결하는 방법을 살펴보자.

입력란으로부터 데이터를 가져오는 방법에는 크게 두 가지가 있다.

 

1/ v-model을 쓰거나 우리가 직접 만든 @input을 사용.

모든 키 입력을 수신해서 사용자가 입력한 모든 키를 데이터 프로퍼티에 저장하면 된다.

이 방법도 아주 좋은데, 특히 유저의 키 입력을 모두 수신해서 양식을 제출하기전에 유효성 검사를 하고 유효하지 않다면 오류 메시지를 띄우기에 딱 좋다.

 

게다가, v-model을 사용하면 양방향 바인딩이 가능해서, 양식 reset에도 도움이 된다.

양방향 바인딩을 통해 유저가 입력한 데이터만을 수신하는게 아니라, form에 있는 데이터를 덮어쓸 수도 있다. 게다가 input요소에 저장된 값도 바꿀 수 있다. 그러니 매우 유용하다.

 

2023.07.03 - [Vue.js] - [Udemy Vue 완벽가이드 Section2] 27. 데이터 바인딩 + 이벤트 바인딩 = 양방향 바인딩

[Udemy Vue 완벽가이드 Section2] 27. 데이터 바인딩 + 이벤트 바인딩 = 양방향 바인딩

 

data 프로퍼티를 몇개 추가해보자.

userName을 추가하고, 이름 input요소의 v-model에 userName을 바인딩하자.

그러면 Vue는 자동으로 모든 키 입력을 감지해서 userName에 '저장된 값'을 업데이트한다.

반대로, 우리 코드를 이용해 userName에 저장된 값을 바꾸면, 예를 들어 양식을 submit하고, userName값을 reset하면, 그 reset된 값이 input요소에 반영된다. (양방향 바인딩)

 

한번 테스트해보자.

submitForm메서드에서 console로 userName값을 출력해보자. 그리고 userName값을 다시 빈문자열로 설정하자.(reset)

<template>
  <form @submit.prevent="submitForm">
    <div class="form-control">
      <label for="user-name">Your Name</label>
      <input
        id="user-name"
        name="user-name"
        type="text"
        v-model="userName"
      />
    </div>
    <div>
      <button>Save Data</button>
    </div>
  </form>
 </template>
 <script>
export default {
  data() {
   return {
     userName: '',
   },
  },
  methods: {
    submitForm() {
     console.log('Username: + ' + this.userName);
     this.userName = '';
    },
  },
};
</script>

개발자 도구를 열어보자.

 

Your Name 필드에 이름을 입력하고, Save Data 버튼을 누르면,

콘솔에 'Username: + 입력값'이 보인다.

양식을 제출하고 나니, input창이 비었다. 

this.userName = "" 코드로 userName이 빈 문자열로 돌아가게 설정했으므로.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.