9. 폼 입력 바인딩

폼 입력 바인딩

기본 사용법

---

v-model 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩 생성 가능
입력 유형에 따라 엘리먼트를 업데이트하는 방법을 자동으로 선택함
이때 v-model은 기본적으로 사용자 입력 이벤트에 대한 데이터를 업데이트하는 “syntax sugar”이며 일부 경우에는 주의해야 함

v-model은 모든 form 엘리먼트 초기 value, checked, selected 속성 무시,
컴포넌트의 data 옵션 안에 있는 JavaScript에서 초기값을 선언해야 한다.

v-model는 한국어가 업데이트가 되지 않으므로 input을 사용해야 함.

문자열

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

 

박스에 내용을 넣으면 실시간으로 message에 바인딩되어 결과가 나타남

여러줄을 가진 문장

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

마찬가지로 message에 바인딩 되어 결과 나타남
이때 <textarea>{{ text }}</textarea> 는 작동하지 않음

체크박스

하나의 체크박스는 단일 boolean 값을 가짐

<input type="checkbox" id="checkbox" v-model="checked">
</label for="checkbox">{{ checked }}</label>

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

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

셀렉트

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

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

<select v-model="selected" multiple>을 쓰면 다중선택 가능

v-for를 이용한 동적 욥션 렌더링

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

//JavaScript
new Vue({
    el: '...',
    data: {
        selected: 'A',
        options: [
            { text: 'One', value: 'A' },
            { text: 'Two', value: 'B' },
            { text: 'Three', value: 'C' }
        ]
    }
})

값 바인딩하기

---

라디오, 체크박스, 셀렉트 옵션의 경우 v-model 바인딩 값은 보통 정적인 문자열이다

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

그러나 동적 속성에 바인딩 할때는 v-bind를 사용하면 되고, 이것을 사용하면 입력값을 문자열이 아닌 값에 바인딩 할 수 있다.

체크박스

//HTML
<input type="checkbox"
           v-model="toggle"
           v-bind:true-value="a"
           v-bind:false-value="b"
          >

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

라디오

//HTML
<input type="radio" v-model="pick" v-bind:value="a">

//JavaScript
vm.pick === vm.a

셀렉트 옵션

//HTML
<select v-model="selected">
    <!-- inline object literal -->
    <option v-bind:value="{ number: 123 }">123</option>
</select>

//JavaScript
typeof vm.selected 
vm.selected.number

수식어

---

.lazy

기본적으로, v-model은 각 입력 이벤트 후 입력과 데이터를 동기화 함
.lazy를 추가해 change이벤트 이후에 동기화 할 수 있음

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

뭔말인지 모르겠다..

.number

사용자 입력이 자동으로 숫자로 바뀌게 하려면 다음과 같이 사용

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

.trim

input을 자동으로 trim 하려면 다음과 같이 하면 된다.

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

추가적으로 재사용 가능한 input을 컴포넌트로 만들 수 있고 v-model에도 작동함