Vue - select 태그에서 default Value 셋팅하기.

기본적으로 select 는 이렇게 쓴다.

 

<select>
    <option selected>보기를 선택하세요</option>
    <option>프라우드먼</option>
    <option>YGX</option>
    <option>Hook</option>
    <option>라치카</option>
    <option>코카N버터</option>
    <option>웨이비</option>
    <option>원트</option>
</select>

이렇게 하면 보기를 선택하세요가 보여지고 하단에 셀렉트 박스가 보여지는데,

vue에서는 v-model을 사용한다.

 

따라서 v-model을 사용하게 되면 이런 코드가 된다.

 

<select>
    <option v-model="onePick">보기를 선택하세요</option>
    <option>프라우드먼</option>
    <option>YGX</option>
    <option>Hook</option>
    <option>라치카</option>
    <option>코카N버터</option>
    <option>웨이비</option>
    <option>원트</option>
</select>

 

이렇게 v-model을 주는데, 그렇다면 우리는 어떻게 default value를 설정할 수 있는가?

 

출처 - https://kr.vuejs.org/v2/guide/forms.html

v-model을 사용하면 checked와 selected 속성을 무시한다!

 

따라서 우리는 초기데이터를 셋팅해 주어서 default value를 셋팅해야 한다.

 

<select v-model="onePick">
    <option value="0">보기를 선택하세요</option>
    <option value="1">프라우드먼</option>
    <option value="2">YGX</option>
    <option value="3">Hook</option>
    <option value="4">라치카</option>
    <option value="5">코카N버터</option>
    <option value="6">웨이비</option>
    <option value="7">원트</option>
</select>



<!-- v-for 사용시 시작-->

<select v-model="onePick">
    <option v-for="SWF in SWFList" :value="SWF.value">{{ SWF.text }}</option>
</select>



export default {
	data(){
    	return{
            SWFList:[
            {
            	text : "보기를 선택하세요",
            	value : "0"
            },
            {
            	text : "프라우드먼",
            	value : "1"
            },
            {
            	text : "YGX",
            	value : "2"
            },
            {
            	text : "Hook",
            	value : "3"
            },
            {
            	text : "라치카",
            	value : "4"
            },
            {
            	text : "코카N버터",
            	value : "5"
            },
            {
            	text : "웨이비",
            	value : "6"
            },
            {
            	text : "원트",
            	value : "7"
            }
        ],
        	onePick : "0"
        }
    }
}


<!-- v-for 사용시 끝 -->

 

개념은 v-model에 데이터를 바인딩 해주고, 그 데이터에 초기값을 준다.

그리고 option에 value 값을 줘서 셋팅한다.

 

스택오버플로우에 보면 :selected, :requiered 등 여러 프로퍼티를 주는데 이렇게 해결하면 쉽다.

v-for 돌리는 것도 혹시 모르니 남긴다.