[Vue.js] 폼입력 바인딩

폼 입력 바인딩

폼 입력 바인딩은 v-model 이라는 디렉티브를 사용하여 양방향 데이터 바인딩을 생성합니다.

1. 단방향 데이터 바인딩

<h1>{{ msg }}</h1>
<input type="text" :value="msg" />
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}

위와 같이 데이터를 스크립트 태그로 연결하여 Vue에서 활용할 수 있었습니다.

이렇게 데이터를 출력하는 방법을 단방향 데이터 바인딩이라고 합니다.

데이터에서 html 쪽으로 한 방향으로만 흐르기 때문에 단방향 데이터 바인딩이라 부릅니다.

단방향 데이터 바인딩으로 인하여 input 요소를 수정한다하더라도 수정된 내용이 msg 데이터를 갱신하지 않습니다.

2. 양방향 데이터 바인딩

<h1>{{ msg }}</h1>
<input type="text" :value="msg" @input="msg = $event.target.value"/>

이처럼 input 요소에 이벤트를 청취하도록 합니다. 그리고 msg의 데이터에 $event.target.value를 할당합니다. 이를 통해, msg의 기본값인 'Hello world!'에 수정을 하면 반응성이 이루어져 $event.target.value 값으로 다시 할당이 되는 것입니다.

이러한 개념이 바로 데이터가 양쪽으로 흐르는 양방향 데이터 바인딩이라는 것입니다.

3. v-model

3.1 사용법

위의 양방향 데이터 바인딩을 인라인 요소로 html에 입력하였습니다. 하지만, 이를 더 간단하게 표현할 수 있는 방법이 있으며 그것이 바로 v-model입니다.

<h1>{{ msg }}</h1>
<input type="text" v-model="msg" />

3.2 유의사항

그러나 v-model의 경우 input 요소에 영어가 아닌 한글을 입력하게 되면, 하나의 글자가 완성되지 않으면 연결되지 않습니다. 한 박자 느리게 동작을 하게 되는거죠.

그 이유는 한글이 자음과 모음으로 되어 있어 하나의 문자가 완성되기 전까지는 동작이 지연되기 때문입니다. 이러한 이유로 한글 입력 시에는 v-model이 아닌 $ event.target.value를 사용하셔야 합니다.

<h1>{{ msg }}</h1>
<input type="text" :value="msg" @input="msg = $event.target.value"/>

 

4.수식어

.lazy

기본적으로, v-model은 각 input 이벤트 후 입력과 데이터를 동기화 합니다. (단, 앞에서 설명한 IME 구성은 제외됩니다.). lazy 수식어를 추가하여 change이벤트 이후에 동기화 할 수 있습니다.:

<!-- "input" 대신 "change" 이후에 동기화 됩니다. --> 
<input v-model.lazy="msg" />

.number

사용자 입력이 자동으로 숫자로 형변환 되기를 원하면, v-model이 관리하는 input에 number 수식어를 추가하면 됩니다.

<input v-model.number="age" type="number" />

type="number"를 사용하는 경우에 HTML 입력 요소의 값은 항상 문자열을 반영하기 때문에 종종 유용합니다. 만약, 값이 parseFloat()에 의해서 분석할 수 없는 경우, 원래의 값이 리턴됩니다.

.trim

사용자가 입력한 내용에서 자동으로 앞뒤 공백을 제거하는 트림처리가 되길 바란다면, v-model이 관리하는 input에 trim 수식어를 추가하면 됩니다.

<input v-model.trim="msg" />