폼 입력 바인딩

• v-model : input, textarea, select 요소들에 양방향 데이터 바인딩
• 사실 속성과 이벤트 두개를 단축한 문법설탕이다
• textarea, input 타입 text == value속성 + input이벤트
⇒ 즉, :value = “val” 속성과 @input = “val = event.target.value” 이벤트
• 타입 checkbox, radio == checked 속성과 change 이벤트
• 한글은 v-model을 사용할 시 실시간 반영이 되지 않는다. (한 음절마다 반영됨) ⇒ v-model말고 풀어쓰는걸 추천
• 셀렉터의 속성 값보다 v-model의 값을 더 우선시 한다

<input v-model="checked" type="checkbox" checked />
<!-- checked 속성보다 v-model 값인 checked를 더 우선시 -->

• checkbox 타입에서 v-model 값으로 boolean이 아닌 배열을 줘서 추가된 체크들을 배열 data에 추가할 수 있다
• input요소에 value 속성을 줘서, 체크하면 배열에 해당 value 값이 추가된다

<input v-model="checked" value="Leon" type="checkbox" />
<input v-model="checked" value="Jully" type="checkbox" />
<input v-model="checked" value="JJong" type="checkbox" />

...
<script>
..
	data() {
		return {
			checked: []
		}
	}
</script>

• radio 타입에서도 value를 줘서 체크 시 v-model 값에 등록할 수 있다

<input v-model="picked" type="radio" value="Leon" />
<input v-model="picked" type="radio" value="Jully" />
<input v-model="picked" type="radio" value="JJong" />
...
<script>
..
	data() {
		return {
			picked: '' //radio이므로 하나만 선택됨
		}
	}
</script>

 

• select - option
• select에 value값과 같은 value를 가진 option이 선택되어 진다
• option의 value를 생략하면, contentText가 value가 된다
• 이 value를 v-model로 해서, 양방향 데이터로 만들 수 있다
• 기본 선택은 option의 첫번째 값임에 주의 ⇒ 첫번째 option은 빈 값을 해주면 좋음
 
 

input 셀렉터의 v-model 수식어

• input의 .lazy ⇒ value 속성 + change이벤트
• 원래는 input이벤트로 값을 쓸 때마다 동기화
• change 이벤트로 입력이 끝난 후(엔터키나 포커스를 잃었을 때 등)에 동기화 할 수 있음

• .number
• type=”number”일 때(생략 가능하긴 함) 사용자 입력이 자동으로 숫자 형변환

• .trim
• 입력의 앞 뒤로 공백이 제거 됨