Vue) Select option 사용하기, v-for 할때 default 옵션 지정 방법

<Select>, <option> 태그를 쓰면 아래 사진같은 걸 만들 수 있다. 

 

단순히 반복할거라 v-for를 써서 반복했는데

<select id="selc_month">
    <option v-for="month in 12" :value=month :key="month">{{ month }}</option>
</select>

 

사용자들이 중간에 있는 숫자를 많이 쓸 것 같아서 처음부터 기본 값을 8로 나타나게 하고싶었다. 

 

여기서 약간 방황.... v-for를 쓰는게 아니라면 기본으로 하고싶은 option태그에 selected를 적으면된다. 아래처럼

<select id="selc_month">
    <option value="가">가</option>
    <option value="나" selected>나</option>
    <option value="다">다</option>
</select>

근데 나는 v-for를 써서 반복하기 때문에 이렇게 한 태그에 selected를 적을 수 없었다. 

결국 젤 좋은 방법은 마지막에 있는데 급하신 분은 바로 마지막꺼 보면된다. 

 

 

첫번째 시도 : v-if를 걸어서 8일때만 selected 지정하도록 하기.

Vue 2.3버전부터 v-for과 v-if를 같이 쓸 수 있다고 한다. 

근데 우선순위가 다르다. 2.X 는 for가 우선이고, 3.X는 if가 우선이라고 한다.

나는 3.X 버전인데, 반복을 먼저 하면서 if로 걸러주길 원했는데 그렇게 안되니 탈락. 

아니면 서로 다른 레벨단에서 쓰면 가능하긴한데, 나는 같은 <option>태그에 둘다 쓰길 원하니 불가능했다. 

심지어 v-for과 v-if를 동시에 쓰는걸 권장하지 않으니 탈락.

 

 

두번째 시도: <option>태그로 기본만 따로 먼저 지정하기

구글링을 해보니 첫 옵션에 :value="null" 을 지정한 옵션을 넣어보라고 한다. 

<select id="selc_month">
    <option value="null">8</option>
    <option v-for="month in 12" :value=month :key="month">{{ month }}</option>
</select>

이건 그냥 앞에 8이 생기고 선택할 수 없는 값이다. --선택하세요--라는 문구를 출력하는 방법이고,

나처럼 중간의 값을 셋팅하는건 아니었다. 탈락. 

 

 

세 번째  : 결국 스크립트 단에서 지정해주기!

결국 태그 안에서만 해결하려했던 욕심을 놔두고(좋은 방법이 있을줄 알았ㅋㅋ 탐구해보는건 좋은거니까! ㅎㅎ) 스크립트단에서 했다. 스크립트로 할 수 있는 방법은 두가지가 있다. 

 

첫번째, 순수 자바스크립트로 하기

select태그에 지정한 id에서 원하는 옵션에 selected를 준다. 

option[인덱스번호] 로 지정해서 해당 값을 미리 선택하여 디폴트값으로 주는 것.

document.getElementById('selc_month').options[7].selected = true

 

 

 

두 번째, v-model 사용하기

v-model은 해당 값을 의마하는데, selected 옵션보다 우선순위다. 

v-model에 변수를 넣어두고 해당변수에 초기값을 둔다. 이때의 값은 인덱스가 아닌, value값이다. 

<select id="selc_month" v-model="defaultM">
    <option v-for="month in 12" :value=month :key="month">{{ month }}</option>
</select>

export default {
  data() {
    return {
        defaultM : 8
	  }
	}, 
}

 

 

걍 처음부터 스크립트로 할걸, 괜하 다른방법 없다 찾다가 고생...은 아니고 좋은 공부가 되었다.ㅋㅋㅋ

vue 화이팅~

 

 

도움이 되었다면 공감💗 부탁해요!