코드를 실행하면 value 속성의 값이 cafeLatte인 <option> 태그가 선택되어 있습니다. 개발자 도구(F12)를 열고 콤보박스 요소의 값을 바꾼 후 확인을 눌러보세요. 라디오 버튼 요소와 마찬가지로 콤보박스 요소도 사용자가 선택한 <option> 태그의 value 속성의 값이 v-model 디렉티브에 연결된 데이터에 자동으로 업데이트됩니다.

그림 3-35 콤보박스 요소 실행결과

● v-model 디렉티브 사용 시 주의 사항

뷰에서 사용자 입력 요소를 다룰 때, 대부분은 v-model 디렉티브를 사용하면 됩니다. 그런데 한 가지 주의할 점이 있습니다. 예제를 보면서 설명하겠습니다.