[Vue.JS] 폼 입력 바인딩

이번 포스트에서는 폼 엘리먼트(input, textarea, select 엘리먼트)에 양방향 데이터 바인딩을 하는 방법을 이야기 할 것입니다.

1. v-model 사용법

v-model 디렉티브를 사용하여 폼 엘리먼트(input, textarea, select 엘리먼트)에 양방향 데이터 바인딩을 할 수 있습니다. v-model은 모든 폼 엘리먼트의 초기 value와 checked, selected 속성을 무시합니다. Vue 인스턴스의 데이터에 의해서만 동작합니다.

참고 - IME 사용시 유의사항

IME (중국어, 일본어, 한국어 등..)가 필요한 언어의 경우 IME 중 v-model이 업데이트 되지 않습니다. IME 중 업데이트 처리를 하기 위해서는 input 이벤트를 사용해야 합니다.

문자열

<div id="app">
  <input v-model="message">
  <p>메시지: {{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: ''
  }
});

위의 예제 결과는 CodePen에서 확인 할 수 있습니다.

여러줄을 가진 문장

<div id="app">
  <span>여러 줄을 가지는 메시지:</span>
  <p style="white-space: pre-line">{{ message }}</p>
  <br>
  <textarea v-model="message"></textarea>
</div>

new Vue({
  el: '#app',
  data: {
    message: ''
  }
});

위의 예제 결과는 CodePen에서 확인 할 수 있습니다. <textarea>{{ message }}</textarea> 는 등작하지 않습니다.

체크박스

하나의 체크박스는 boolean 값을 가집니다.

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

new Vue({
  el: '#app',
  data: {
    checked: false
  }
});

위의 예제 결과는 CodePen에서 확인 할 수 있습니다.

여러개의 체크박스는 배열 값을 가집니다.

<div id="app">
  <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>
</div>

new Vue({
  el: '#app',
  data: {
    checkedNames: []
  }
});

위의 예제 결과는 CodePen에서 확인할 수 있습니다.

라디오

<div id="app">
  <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>
</div>

new Vue({
  el: '#app',
  data: {
    picked: ''
  }
});

위의 예제 결과는 CodePen에서 확인 할 수 있습니다.

셀렉트

하나의 셀렉트

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

new Vue({
  el: '#app',
  data: {
    selected: ''
  }
});

위의 예제 결과는 CodePen에서 확인 할 수 있습니다.

다중 셀렉트

<div id="app">
  <select v-model="selected" multiple>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

new Vue({
  el: '#app',
  data: {
    selected: []
  }
});

위의 예제 결과는 CodePen에서 확인 할 수 있습니다.

v-for을 사용한 동적 옵션 렌더링

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

new Vue({
  el: '#app',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
});

위의 예제 결과는 CodePen에서 확인 할 수 있습니다.

2. 값 바인딩하기

라디오, 체크박스, 셀렉트 옵션의 경우, v-model에 바인딩 되는 값은 보통 정적인 값(문자열 또는 boolean)입니다.

<!-- `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-model에 동적으로 값을 바인딩 해야 할 경우가 있습니다. 이 때 v-bind를 사용하면 됩니다. v-bind를 사용하면 입력 값이 문자열이 아닌 값도 바인딩 할 수 있습니다.

체크박스

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

// 체크된 경우
vm.toggle === 'yes'
// 체크 되지 않은 경우
vm.toggle === 'no'

true-value와 false-value는 input의 value에 영향을 미치지 않기 때문에 브라우저의 form의 submit에 포함되지 않습니다.

라디오

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

// 체크 하면:
vm.pick === vm.a

v-model에 라디오 동적 바인딩 하기

셀렉트 옵션

<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은 입력 이벤트 후 데이터를 동기화 합니다(IME는 제외). .lazy 수식어를 사용하여 change 이벤트 이후에 동기화 할 수 있습니다.

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

.number

.number 수식어는 v-model에 사용자 입력이 숫자형으로 업데이트하기 위해 사용됩니다.

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

type="number"을 사용하더라도 사용자 입력 값이 항상 문자열로 바인딩되기 때문에 유용하게 사용할 수 있는 수식어입니다.

.trim

.trim 수식어는 v-model에 사용자 입력 값이 trim 된 값을 바인딩하기 위해 사용됩니다.

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

참고

• https://kr.vuejs.org/v2/guide/forms.html