[Vue.js] 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>

 

위와 같은 코드가 나타나는데요

 

 

이러한 이미지로 만들어지는 것을 볼 수 있습니다.

출처: https://v2.ko.vuejs.org/v2/guide/forms.html#%EC%85%80%EB%A0%89%ED%8A%B8

 

저는 저렇게 만들지 않고,

v-for 을 이용하여 select 태그를 완성하였는데요

 

<td><select v-model="user.WRK_TYP_CD">
        <option 
          v-for="user in selWrkTyp"
          :key="user.WRK_TYP_CD"
          :value=user.value
        >{{ user.name }}</option>
      </select></td>

data() {
    return {
      selWrkTyp: [
        {name:"전체", value: ""},
        {name:"A", value: "01"},
        {name:"B", value: "02"},
      ],
    };
  },

 

이렇게 완성을 하였습니다.

 

데이터 바인딩을 v-model 에다가 해주었는데요

 

:key에다가만 데이터 바인딩 하고

 

v-model = "selected"
 
data() {
    return {
      selected: "",
    };
  },

 

위 코드처럼 선언을 했더니 제대로 데이터 바인딩이 안되더라구요

 

그래서 위 코드처럼

<select v-model="user.WRK_TYP_CD">

 

선언해주니까 데이터 바인딩이 아주 잘 되는 것을 확인할 수 있었습니다.