Form Input 바인딩
v-model 디렉티브를 사용하여 Form input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있다.
입력 유형에 따라 엘리머느를 업데이트 하는 올바른 방법을 자동으로 선택한다.
v-model은 기본적으로 사용자 입력 이벤트에 대한 데이터를 업데이트하는 "syntax sugar"이며 일부 경우에 특별히 주의 해야 한다.
❗️v-model은 항상 Vue 인스턴스 데이터를 원본 소스로 취급하기 때문에 모든 form 엘리먼트의 초기 value와 checked 그리고 selected 속성을 무시한다.
컴포넌트의 data 옵션 안에 있는 JavaScript에서 초기값을 선언해야 한다.❗️
v-model은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 전송한다.
- text와 textarea 태그는 value 속성과 input 이벤트 사용
- 체크 박스들과 라디오 버튼들은 checked 속성과 change 이벤트 사용
- select 태그는 value를 prop으로, change를 이벤트로 사용
문자열
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>여러 줄을 가진 문장
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<!-- <textarea>{{text}}</textarea>는 작동하지 않음 -->체크박스
하나의 체크박스는 단일 boolean 값을 가진다.
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>여러 개의 체크 박스는 같은 배열을 바인딩할 수 있다.
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>new Vue({
el: '...',
data: {
checkedNames: []
}
})라디오
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>셀렉트
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>다중 셀렉트
<select v-model="selected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>v-for 셀렉트
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})값 바인딩
라디오, 체크박스 및 셀렉트 옵션의 경우, v-model 바인딩 값은 보통 정적인 문자열(또는 체크박스의 boolean)이다.
<!-- 정적인 문자열 예시 -->
<!-- `picked` : 선택 시 값은 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` : 값은 true or false -->
<input type="checkbox" v-model="toggle">
<!-- `selected` : ABC 선택 시 값은 abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>체크박스
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>// when checked:
vm.toggle === 'yes'
// when unchecked:
vm.toggle === 'no'라디오
<input type="radio" v-model="pick" v-bind:value="a">vm.pick === vm.a셀렉트 옵션
<select v-model="selected">
<!-- inline object literal -->
<option v-bind:value="{ number: 123 }">123</option>
</select>// when selected:
typeof vm.selected // output : 'object'
vm.selected.number // output : 123.lazy
기본적으로, v-model은 각 입력 이벤트 후 입력과 데이터를 동기화 한다.
.lazy 수식어를 추가하여 change 이벤트 이후에 동기화 할 수 있다.
<!-- synced after "change" instead of "input" -->
<input v-model.lazy="msg">.number
사용자 입력이 자동으로 숫자로 형변환 되기를 원할 때,
v-model이 관리하는 input에 .number 수식어를 추가하면 된다.
<input v-model.number="age" type="number">.trim
v-model이 관리하는 input을 자동으로 trim(끝 공백이 사라지게) 하기 원하면,
.trim 수정자를 추가하면 된다.
<input v-model.trim="msg">