[vue 3] 07.v-model

이번 포스트에서는 Vue에서 양방향 데이터 바인딩에 사용되는 v-model에 대해서 살펴보자.

 

v-model

 

v-model

v-model은 사용자로부터 값을 입력받는 <input>, <select>, <textarea> 등에서 사용된다. 기본적으로 v-bind 처럼 value 속성에 모델의 값을 표시하는데 추가로 입력값을 변경하면 자동으로 모델에 반영시켜 준다. 즉 v-bind와 뒤에 배울 이벤트가 결합된 형태이다.

<input>에서 type이 checkbox인 경우나 <select>에서 multiple 속성인 경우는 선택된 값이 배열 객체와 연결되며 나머지는 단일 값과 연결된다.

html에서 <textarea>의 경우 값을 출력할 때  <textarea>내용</textarea>의 형태를 사용하지만 vue에서 값을 입력할 때는 {{}}를 이용한 interpolation은 동작하지 않는다.

 

수식어(modifiers)

v-model 디렉티브에는 디렉티브에 특별한 기능을 추가하기 위해 수식어를 사용할 수 있다. 다음은 주요 수식어들이다.

수식어	설명
lazy	입력 폼에서 change 이벤트가 발생하면 데이터 동기화(기본은 key 이벤트가 발생할 때 마다 반영)
number	입력 값을 parseInt 또는 parseDouble를 이용해 number 타입으로 저장(기본은 string)
trim	입력 문자열의 앞 뒤 공백을 자동으로 제거

 

이런 수식어는 '.'를 이용해서 설정하며 여러 속성을 chaining 할 수도 있다. 다음 코드는 첫 번째 input 요소에 favorite라는 model 속성을 연결하는데 .trim에 의해 입력 값에서 앞, 뒤 공백을 제거하는 것이다. 두 번째 input 요소는 year라는 속성과 연결되고 .number이므로 입력 값이 문자열이 아닌 숫자로 parsing 된다. 또한 .lazy에 의해 change 이벤트가 발생하면 model에 반영된다.

<input type="text" v-model.trim="favorite">
<input type="text" v-model.lazy.number="year">

 

활용 예

v-model이 활용된 예를 살펴보자.

<div id="app">
    <label>아이디를 입력하세요.</label> <input type="text" v-model.trim.lazy="user.id" /><br />

    <label>나이는?</label> <input type="text" v-model.lazy.trim.number="user.age" /><br />

    <label>통신사</label>
    <input type="radio" value="skt" v-model="user.comm" /><label>SKT</label>
    <input type="radio" value="kt" v-model="user.comm" /><label>KT</label>
    <input type="radio" value="lgup" v-model="user.comm" /><label>LGU+</label><br />

    <label>전공은?</label>
    <input type="checkbox" value="com" v-model="user.major" /><label>컴퓨터공학</label>
    <input type="checkbox" value="sw" v-model="user.major" /><label>소프트웨어공학</label>
    <input type="checkbox" value="etc" v-model="user.major" /><label>기타</label><br />

    <label>주소지?</label>
    <select v-model="user.addr">
      <option disabled value="">지역선택</option>
      <option>서울</option>
      <option>경기</option>
      <option>광주</option>
    </select>

    <hr />
    <label>사용자 정보</label>
    {{user}}, {{user.age + 10}}
</div>

template 하단에 사용자 정보를 출력하는 부분에서 user.age+10이라는 연산 코드가 있는데 나이를 입력 받을 때 v-model.number로 작성되어있기 때문에 숫자로 연산이 가능하다.

major를 입력받기 위한 checkbox는 다중 선택이 가능하다.

다음은 script 부분이다. 

<script>
    const { createApp, reactive } = Vue;
    createApp({
        setup() {
            const user = reactive({ major: [] });
            return {
              user,
            };
        },
    }).mount("#app");
</script>

주의할 점은 user 객체를 작성할 때 major라는 속성 값을 []로 선언해 놓은 부분이다. 다른 속성과 달리 다중 선택이 가능한 checkbox의 개별 정보를 받기 위해서는 미리 값의 타입이 배열임을 선언해두어야 한다. 그렇지 않은 경우 하나의 체크박스를 체크하면 다른 체크박스들이 모두 선택되어버린다.