vue.js - 폼 입력 바인딩
사용자 입력 데이터 바인딩
- v-model 디렉티브를 이용해서 input, textarea, select등과 같은 폼과 관련된 태그의 데이터를 바인딩 할 수 있습니다.
- v-model 디렉티브를 사용하면 폼 관련 태그의 입력과 데이터 바인딩을 양방향으로 손쉽게 할 수 있습니다.
- v-model을 사용하면 사용자 입력과 데이터가 어긋나는 일이 없어져 개발자가 조작하기 조금 더 쉬워집니다.
<div id="app">
<h1> </h1>
<input type="text" v-model= 'value'>
</div>
<script>
const app = new Vue({
el: 'app',
data: { value: "default"},
})
</script>
- 주의할점은 v-model은 항상 vue 인스턴스의 데이터를 원본으로 취급하기 때문에 form엘리먼트의 초기 value와 checked, selected속성을 무시합니다.
- 두 번째로 IME(input method editor)가 필요한 언어의 경우 IME중에는 v-model이 업데이트 되지 않습니다. IME중 업데이트를 처리하고 싶으면, input 이벤트를 사용해야 합니다.
- select에서 v-model을 사용할 때 표현식의 초기 값에 어떠한 옵션에도 없으면, select 엘리먼트는 선택없음 상태로 렌더링됩니다. 이때 iOS는 변경 이벤트가 발생하지 않아 사용자가 첫 번째 항목을 선택할 수 없게 됩니다. 그래서 사용하지 않는 옵션에 빈값을 넣는것이 좋습니다.
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>선택함: </span>
<script>
new Vue({
el: '...',
data: {
selected: ''
}
})
</script>
v-model 바인딩 값
- text input인 경우 데이터는 value속성을 가져오고, 오직 문자열로만 가져옵니다.
- checkbox인 경우 checked속성을 가져오고, 값은 단일인 경우 true 또는 false로 가져옵니다. 같은 데이터로 여러 체크박스를 지정하면, value값의 문자열 배열로 바인딩됩니다.
- radio과 select 타입인 경우 데이터와 선택된 값의 value 속성값을 바인딩합니다.
v-model 수식어
- .lazy, .trim, .number가 있습니다.
- .lazy는 실시간으로 데이터를 바인딩하지 않고 사용자 입력이 끝났을 경우에 데이터를 바인딩합니다.
- .trim는 사용자 엽력의 공백문자를 정리해줍니다.
- .number는 숫자를 입력해도 문자열로 변환되서 돌아오는 데이터를 숫자로 변경해주는 수식어입니다.
ps. 찾아보고 공부하면서 정리하는 내용이라 틀릴 수 있음을 알려드립니다.
참고