개발 중에 select 태그를 사용할 일이 있어서 다음과 같이 만들었다.
<select class="custom-select" v-model="firstGroup" >
<option v-for="value in groupSortingLists" :key="value.DisplayName" :value="value">{{value.displayName}}</option>
</select><vue.js select 방법>
<select v-model="data나 props에 선언한 변수">
<option v-for="옵션에 뿌려줄 데이터 in 데이터 배열"> {{옵션에 뿌려줄 데이터}}</option>
</select>
select에 기본 값을 주려고 <option selected>콘텐츠를 선택하세요.</option>를 추가했다.
당연히 기본 값이 나오리라고 생각하고 f5를 눌렀는데, 빈 select만 나오는 것;;
열심히 서치해서 갖은 방법을 동원해도 안됐다.
<내가 한 방법>
1. option에 selected라고 주지 않고 :selected="true" 값 줘보기
2. v-model 에 바인딩한 변수에 "콘텐츠를 선택하세요." 값 초기화
3. :value="default"값 주고 v-model에 바인딩한 변수에 "default"초기화
등등..
아무리 갖은 노력을 해도 안돼서 포기하려던 찰나,, 스택 오버플로에서 나온 걸 따라해보니 바로 됐다ㅠ
<select class="custom-select" v-model="firstGroup" >
<option :value="null" >콘텐츠를 선택하세요.</option>
<option v-for="value in groupSortingLists" :key="value.DisplayName" :value="value">{{value.displayName}}</option>
</select>
:value 대신 그냥 value를 써도된다. 뭐든 null값을 넣어주면 되는 것이다.
왜! 다른 사이트에선 v-model에다가 초기값을 넣어주면 된다고 했는데 value에다가 null값을 넣어줘야만 할까????
답변자는 "내 경우엔, 내가 바인딩한 v-model 이 빈 문자열보단 null을 리턴하더라. 이건 Vue 바인딩이 시작되고 한번도 디폴트 옵션이 선택되지 않았음을 의미함" 이라고 했는데,
내 생각에는 v-model에 아무리 초기값을 줘도 처음에 랜더링 할 때 기본값이 null이 되는 것 같다.
그러니 조건에 맞는 option이 되려면 value가 null이어야 하는 것.. (나는 버전 v2.6.11 이다.)
오늘도 .. 삽질로 성장한다... ^^
참고 사이트
https://stackoverflow.com/questions/40375602/placeholder-for-select-in-vuejs-2-0-0