Vue - Form 입력 바인딩

Form 입력 바인딩

일반적으로 Form을 처리할 때, Form에서 사용되는 element들은 값을 수동으로 바인딩하고 이벤트 리스너를 변경해야 하는 번거로움이 있는데 v-model 디렉티브를 이용하면 편리하게 사용할 수 있다.

 

<input v-model="text">

 

v-model은 서로 다른 유형의 엘리먼트에 따라 자동으로 속성과 이벤트를 사용한다.

엘리먼트	속성	이벤트
<input> <textarea>	value	input
<input type="checkbox"> <input type="radio">	checked	change
<select>	value	change

 

 

1. 기본 사용법

1-1. 텍스트

• value 속성, input 이벤트

<!-- 텍스트 -->
<p>메세지: {{ message }}</p>
<input v-model="message" placeholder="메세지 입력하기" />


<!-- 여러 줄 텍스트 -->
<span>여러 줄 메세지:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="여러 줄을 추가해보세요"></textarea>


<!-- 주의! <textarea> 내부에 이중 중괄호 문법은 작동하지 않는다 -->
<!-- 잘못된 사례 -->
<textarea>{{ text }}</textarea>

<!-- 올바른 사례 -->
<textarea v-model="text"></textarea>

 

 

1-2. CheckBox

• checkd 속성, change 이벤트

<!-- 체크한 경우 toggle=true, 체크안한 경우 toggle=false -->
<input type="checkbox" id="checkbox" v-model="toggle" />
<label for="checkbox">{{ checked }}</label>

 

배열 또는 Set에 여러 개의 체크박스 값을 바인딩할 수 있다.(다중 선택)

// check된 이름들이 표시 된다.
<div>체크된 이름: {{ checkedNames }}</div>

<input type="checkbox" id="jack" value="젝" v-model="checkedNames">
<label for="jack">젝</label>

<input type="checkbox" id="john" value="존" v-model="checkedNames">
<label for="john">존</label>

<input type="checkbox" id="mike" value="마이크" v-model="checkedNames">
<label for="mike">마이크</label>


export default {
  data() {
    return {
      checkedNames: []
    }
  }
}

 

true, false가 아닌 값을 바인딩하기 위해서는 true-value, false-value 속성을 사용할 수 있다.

(true-value와 false-value는 Vue 전용 속성)

<input
  type="checkbox"
  v-model="toggle"
  true-value="네"
  false-value="아니오" />

 

또한 v-bind(:) 디렉티브를 이용하여 동적인 값을 바인딩할 수 있다.

<input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />

 

1-3. Radio

• checkd 속성, change 이벤트

<!-- 선택한 radio의 value 값이 표시된다. -->
<div>선택한 것: {{ picked }}</div>

<input type="radio" id="one" value="하나" v-model="picked" />
<label for="one">하나</label>

<input type="radio" id="two" value="둘" v-model="picked" />
<label for="two">둘</label>

 

radio도 마찬가지로 동적인 값을 바인딩할 수 있다.

<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />

 

1-4. Select

• value 속성, change 이벤트

<!-- option의 value가 없을 경우 innerText(가,나,다)가 표시 -->
<!-- option의 value가 있을 경우 value 값 표시 -->
<div>선택됨: {{ selected }}</div>

<select v-model="selected">
  <option disabled value="">다음 중 하나를 선택하세요</option>
  <option>가</option>
  <option>나</option>
  <option>다</option>
</select>

 

마찬가지로 배열로 여러 개의 select 값을 바인딩할 수 있다.(다중 선택)

<div>선택됨: {{ selected }}</div>

<select v-model="selected" multiple>
  <option>가</option>
  <option>나</option>
  <option>다</option>
</select>

 

select option은 v-for로 동적으로 렌더링 할 수 있다.

<select v-model="selected">
  <option v-for="option in options" :value="option.value">
    {{ option.text }}
  </option>
</select>

<div>선택됨: {{ selected }}</div>


export default {
  data() {
    return {
      selected: '1',
      options: [
        { text: '하나', value: '1' },
        { text: '둘', value: '2' },
        { text: '셋', value: '3' }
      ]
    }

 

 

2. 수식어

1-1. .lazy

이건 직접 사용해봐야 하는 부분이다. 꼭 필요하거나 사용해야 하는 것이 아닌 특정 경우에 사용한다. 공홈에서 적혀 있는 내용은 다음과 같다.

 

'기본적으로 v-model은 각 input 이벤트 이후 데이터와 입력을 동기화합니다. 대신 change 이벤트 이후에 동기화하기 위해. lazy 수식어를 추가할 수 있습니다.'

 

해당 부분을 읽어도 와닿지 않는데 정확한 표현은 아니지만 쉽게 얘기하면 모든 이벤트(키보드 입력 등과 같은)가 모두 일어난 이후에 값이 동기화되고, 바인딩이 이루어진다고 생각하면 된다.

<!-- "change" 이벤트 후에 동기화됨 -->
<input v-model.lazy="msg" />

 

 

1-2. .number

input 을 사용하여 입력값을 받는 경우 숫자 또는 문자 무엇을 입력해도 타입이 String로 나타나게 된다. 이 경우 타입을 number 즉, 숫자로 자동으로 바꾸어주는 방법으로 v-model.number를 사용할 수 있다.

(속성에 type="number"가 있으면 .number 수식어가 자동으로 적용이 된다.)

<!-- 숫자를 입력하면 type은 number로 나온다 -->
<p>타입: {{ typeof age }}</p>
<input v-model.number="age" />

 

하지만 parseloat()로 파싱 할 수 없으면 원래 타입인 String이 된다.

 

 

1-3. .trim

일반적으로 알고 있는 trim 함수와 마찬가지로 입력값의 앞과 두의 공백을 제거해 준다.

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