[ Vue.js 3 공식 문서 ] 2. Essentials - Form Input Binding (v-model)

 

[ Reference ] 

https://vuejs.org/guide/essentials/forms.html

Form Input Bindings | Vue.js

 

---

1. Basic Usage

Text

<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />

 

  ** v-model ** 을 사용할 때 주의할 점은 IME 가 필요한 언어, 즉 한글은 작성하고 있는 중에 업데이트 되지 않는다. 쉽게 설명하면 한 글자로 업데이트가 되며, 키를 입력하는 자음, 모음 각각 하나에 반응해서 업데이트 되지 않다는 말이다. 그렇기에 한글을 사용할 때 사용자의 경험을 제대로 주고 싶다면 input 태그에 이벤트를 발생시켜서 이벤트 핸들러로 데이터를 바인딩 하는 방식이 필요하다.

 

<h1>{{ msg3 }}</h1>
<input 
  type="text"
  @change='msg3 = $event.target.value' />

 

Multiline Text

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

// 아래와 같이 작성하면 안 된다
<textarea placeholder="add multiple lines">{{message}}</textarea>

 

  이전 예시에서는 엔터키를 친다 해도 줄바꿈이 되지 않았다. 하지만 바로 위의 예제에서 style 로 "white-space: pre-line;" 이 들어가면서 엔터키를 치면 줄바꿈이 된다. 주의할 점은 <textarea> 태그에서는 따로 문자 보간이 되지 않다는 점이다. 대신에 v-modle 을 이용해서 사용해야 한다.

 

 

Checkbox

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

 

  v-model 을 이용해서 check 가 됐는지 안 됐는지를 바로 확인할 수 있다. 

 

const checkedNames = ref([])

<div>Checked names: {{ checkedNames }}</div>

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

 

  위의 코드처럼, array 나 set 을 이용해서 복수의 체크 박스를 바인딩할 수 있다. 이렇게 할 경우, checkNames 배열은 항상 현재 check 된 박스의 값을 지니게 된다. 

 

 

Radio

<div>Picked: {{ picked }}</div>

<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>

<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>

 

Select

<div>Selected: {{ selected }}</div>

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

  

  ** v-model ** 을 이용해 현재 option 으로 무엇이 선택되었는지를 selected 에 할당하고 그 selected 를 div 태그에서 바로 사용할 수 있도록 만든다. 만약 ** v-model ** 이 초기 옵션 중 하나와 일치하지 않은 경우 선택되지 않은 상태로 렌더링이 된다. 만약 iOS 까지 고려를 한다면 iOS 에서는 이럴 때 변경 이벤트를 발생시키지 않기 때문에 위에서 처럼 option 에 disabled 로 비활성 옵션을 만들어 주는 것이 좋다. 

 

  그런데 이런 select 의 경우에는 보통 option 이 여러 개가 나오는 것이 보통이다. 이럴 때는 List Rendering 을 이용하는 것이 좋다.

 

const selected = ref('A')

const options = ref([
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
])

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

<div>Selected: {{ selected }}</div>

 

---

2. Value Bindings

  Radio 나 Checkbox, Select-Options 의 경우 ** v-model ** 로 바인딩을 하는 값은 보통 정적인 문자열이다. (체크박스라면 Boolean 값) 그런데 가끔씩은 그런 동적인 속성을 넣고 싶을 때가 있는데 이럴 경우에는 ** v-bind ** 를 이용해서 가능해진다. 

 

Checkbox

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

  

  ** true-value **, ** false-value ** 는 ** v-model ** 로만 사용할 수 있는 특별한 속성이다. 여기서 toggle 속성 값은 상자를 선택하면 "yes" 가 되고, 선택하지 않으면 "no" 가 된다. 만약 v-bind 를 사용한다면 다음과 같이 조금 더 동적으로 toggle 의 값을 사용할 수 있다.

 

<input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />

 

Radio

<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />

 

  pick 은 첫 번째 radio 를 선택할 때는 first" 로 설정이 되고, 두 번째 radio 를 선택할 때는 "second" 값으로 설정된다. 

 

Select Options

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

 

  ** v-model ** 은 String 이 아닌 값들도 바인딩할 수 있도록 지원해준다. 위의 예시에서 옵션을 선택할 경우 객체 값이 selected 에 할당된다. 

 

---

3. Modifiers 

.lazy 

  기본적으로  v-model 은 이벤트 이후에 입력과 데이터를 바로 동기화한다. IME 언어는 제외(한글 포함). 이벤트 변경 후에 동기화를 하기 위해서 ** lazy ** Modifier 가 있다. (* .lazy = @change + v-model 이라고 생각하면 편하다. @change 는 인풋창에서 포커스가 해제되는 등의 변화가 발생할 때 실행되고 그제서야 입력고 데이터를 동기화 한다)

 

<input v-model.lazy="msg" />

 

.number

  input  창에서 받는 것을 number 타입으로 바로 전환하고 싶은 경우에 사용한다. 만약 input 태그에 type="number" 가 있다면 자동으로 적용된다.

 

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

 

.trim

  사용자가 입력해준 곳에 공백을 제거하고 싶을 때 사용하면 된다. 

  

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