폼 입력 바인딩

기본 사용법

v-model 디렉티브를 사용해서 폼 input과 textarea의 데이터를 바인딩할 수 있습니다.

v-model은 모든 form 엘리먼트의 초기 value와 checked 그리고 selected 속성을 무시합니다. 항상 Vue 인스턴스 데이터를 원본 소스로 취급합니다. 컴포넌트의 data 옵션 안에 있는 JavaScript에서 초기값을 선언해야합니다.

IME (중국어, 일본어, 한국어 등)가 필요한 언어의 경우 IME 중 v-model이 업데이트 되지 않습니다. 이러한 업데이트를 처리하려면 input 이벤트를 대신 사용하십시오.

<input v-model="message" placeholder="여기를 수정해보세요">
<p>메시지: {{ message }}</p>

<span>여러 줄을 가지는 메시지:</span>
<p style="white-space: pre-line">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="여러줄을 입력해보세요"></textarea>

v-model을 사용해 데이터를 바인딩하고 머스터쉬를 사용해서 데이터를 렌더링한다.

텍스트 영역의 보간 (<textarea>{{ text }}</textarea>)은 작동하지 않습니다. 대신 v-model를 사용하십시오.

체크박스

하나의 체크박스는 단일 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>체크한 이름: {{ 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 }}</span>

셀렉트

하나의 셀렉트

<select v-model="selected"> <option disabled value="">Please select one</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>선택함: {{ selected }}</span>

new Vue({ el: '...', data: { selected: '' } })

v-model 표현식의 초기 값이 어떤 옵션에도 없으면, <select> 엘리먼트는 “선택없음” 상태로 렌더링됩니다. iOS에서는 이 경우 변경 이벤트가 발생하지 않아 사용자가 첫 번째 항목을 선택할 수 없게됩니다. 따라서 위 예제처럼 사용하지 않는 옵션에 빈 값을 넣는 것이 좋습니다.

ios에서는 select 초기값이 비어있다.

모든 기기에서 똑같이 보이게 빈값을 넣는게 좋은거같다.

다중 셀렉트

<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 바인딩 값은 보통 정적 문자열이나 bool값이다.

때로는 동적 값을 사용해야 될 때가 있을것이다.

그럴땐 v-bind를 사용한다.

<!-- `picked` 는 선택시 문자열 "a" 입니다 --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 는 true 또는 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" v-bind:true-value="a" v-bind:false-value="b" >

// 체크 하면: vm.toggle === vm.a // 체크하지 않으면: vm.toggle === vm.b

라디오

<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>

// 선택 하면: typeof vm.selected // -> 'object' vm.selected.number // -> 123

수식어

.lazy

v-model은 입력과 함께 동기화 됩니다.

.lazy수식어를 추가해 체인지와 함께 동기화 되게 가능합니다.

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

.number

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

숫자로 자동 형변환이 되게하려면 .number 수식어를 사용하면 됩니다.

.trim

자동으로 트림되는 수식어

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

v-model 과 컴포넌트

Vue의 컴포넌트에 익숙하지 않으면 지금은 보지 않아도 괜찮습니다.

HTML의 기본 제공 input 유형이 항상 사용자의 요구를 만족시킬 수는 없습니다. 다행히 Vue 컴포넌트를 사용하면 완전히 사용자 정의 된 동작으로 재사용 가능한 input을 만들 수 있습니다. 이 input은 v-model에도 작동합니다! 자세한 컴포넌트 가이드의 사용자 정의 입력을 참조하십시오.