폼 입력 바인딩(v-model)

오민영·2021년 8월 5일
0

Vue.js

목록 보기
7/10
post-thumbnail

v-model 디렉티브를 사용해서 form input / textarea / checkbox / radio 등 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있다.

v-model은 기본적으로 사용자 입력 이벤트에 대한 데이터를 업데이트하는 syntex sugar이며, 일부 경우에 특별히 주의해서 사용한다.

v-model은 모든 form 엘리먼트의 초기 value와 checked, disabled, selected 속성을 무시한다.
항상 vue 인스턴스 데이터를 원본 소스로 취급하기 때문에, 컴포넌트의 data 옵션안에 있는 Javascript에서 초깃값을 선언해야 한다.

v-model 속성은 v-bindv-on의 기능의 조합으로 동작한다. 즉, v-model은 매번 일일이 v-bindv-on 속성을 다 지정해 주지 않아도 편하게 개발할 수 있게 고안된 문법인 것! 아래 예시

<input v-bind:value="inputText" v-on:input="updateInput">

new Vue({
  data: {
    inputText: ''
  },
  methods: {
    updateInput: function(event) {
      var updatedText = event.target.value;
      this.inputText = updatedText;
    }
  }
})

v-bind 속성은 뷰 인스턴스의 데이터 속성을 해당 html 요소에 연결할 때 사용
v-on 속성은 해당 html 요소의 이벤트를 뷰 인스턴스의 로직과 연결할 때 사용
사용자 이벤트에 의해 실행된 뷰 메서드 함수의 첫 번째 인자에는 해당 event가 들어온다.

html 입력 요소의 종류(element)에 따라 v-model 속성이 다음과 같이 구성된다.

  • input text &textarea: value 속성 input 이벤트 사용

  • checkbox & radio: checked 속성 change 이벤트 사용

  • select: value 속성, change 이벤트 사용

기본 사용법

text input

입력한 값이 message로 들어간다.

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

textarea

입력한 값이 message로 들어간다.

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

checkbox

하나의 체크박스는 단일 boolean 값을 가지고,
여러개의 체크박스는 같은 배열을 바인딩 할 수 있다.
element에 value를 지정한 경우, value 값을 toggle한다.

<!-- 한개의 체크박스 -->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

<!-- 여러 개의 체크박스 -->
<div id='example-3'>
  <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: '#example-3',
  data: {
    checkedNames: []
  }
})

radio

element에 value를 지정한 경우, value 값을 toggle한다.

<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

<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-for 를 사용한 동적 option 렌더링

<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' }
    ]
  }
})

값 바인딩하기

radio, checkbox, select option 의 경우, 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>

checkbox

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

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

radio

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

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

select options

<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 수식어를 추가하여 change 이벤트 이후에 동기화 하도록 해준다.

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

.number

사용자 입력이 자동으로 숫자로 형변환 되기를 원하면, v-model이 관리하는 input에 number 수식어를 추가하면 된다.

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

type="number"를 사용하는 경우에도 HTML 입력 엘리먼트 값은 항상 문자열(string)을 반환하기 때문에! 종종 유용하게 사용할 수 있다

.trim

v-model이 관리하는 input을 자동으로 앞이나 뒤에 있는 여백(띄어쓰기, 개행)을 제거하기를 원하면 trim 수정자를 추가한다.

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

Reference

참고
참고

profile
이것저것 정리하는 공간

0개의 댓글