[vue] selectbox default 값 지정하는 방법 (v-model)

 

vue.js에서 v-model을 사용하여 셀렉스박스를 생성할때,

'default' 또는 'checked'와 같은 속성은 무시된다. (아래 글 참고)

때문에 디폴트 값은 해당 속성을 사용하는것이 아닌,

v-model에 값을 할당하여 디폴트값을 지정해주는 방식으로 사용되어야 한다.

 

 

 

🎵 예시코드

/** template */
<select v-model="sampleModel">
  <option v-for="(list, index) in sampleList" :key="index" :value="list.value">
	{{ list.text }}
  </option>
</select>

/** 변수 */
sampleList = [{ text: '선택', value: 0 }, { text: '정민', value: 1 }] // 셀렉트박스 리스트
sampleModel = 1 // 1로 하면 '정민'이라는 리스트가 선택됨

 

만약 기본으로  선택 을 선택하고 싶다면,

예시코드 기준으로 v-model 값에 0을 할당해주면 된다!