[Udemy Vue 완벽가이드 Section11] 144. v-model 및 드롭다운

어떻게 드롭다운으로부터 값을 가져올까?

**HTML에서 드롭다운은 <select>태그와 <option>태그를 사용하여 만들 수 있다.

<select>태그를 사용하여 드롭다운 리스트를 만들고, <option>태그를 사용하여 드롭다운 리스트 내 항목들을 만든다.

 

v-model은 input요소에서 작동하는 것처럼 select 요소에서도 작동한다.

그러니 똑같은 방식으로 v-model을 사용하면 된다.

새 data 프로퍼티로 'referrer'로 추가하여 select태그에 바인딩하자.

<select id="referrer" name="referrer" v-model="referrer">
  <option value="google">Google</option>
  <option value="wom">Word of mouth</option>
  <option value="newspaper">Newspaper</option>
</select>

여기 각 option태그에 설정한 value값은 선택값을 바꿀 때마다 data프로퍼티인 referrer에 저장된다.

 

지금 우리가 작업하는건 드롭다운이므로, 초기부터 referrerr값이 있는게 좋다.

userName이나 userAge같은 텍스트 입력란은 비어있어도 괜찮다. (실제로 처음엔 입력란이 비어있다.)

 

하지만 드롭다운의 경우, 기본값을 설정하자.

option태그의 value들 중에서 기본값으로 설정할 옵션을 하나 고르면 된다.

option 중, 'Word of mouth"를 기본값으로 설정하자.  따라서 option태그의 value값인 "wom"을 referrer의 기본값으로 설정하자.

data() {
 return {
  userName: '',
  userAge: null,
  referrer: 'wom',
 }
},
methods: {
 submitForm() {
   console.log('Referrer: ' + this.referrer);
 },
}

이렇게 드롭다운 부분에 'Word of mouth'가 기본값으로 설정되었다.

 

option 중, Google을 선택하고 'Save Data'버튼을 누르면 submitForm메서드가 호출되어 

콘솔에 "Referrer: google"이 뜬다.

 

이렇게 v-model과 data 프로퍼티를 이용하여 손쉽게 select요소의 드롭다운에서 값을 가져오는 방법을 알아봤다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.