Select
기존에 세팅된 값들 중에서 하나를 고를 수 있도록 하는 컴포넌트다.
v-model로 바인딩하여 선택한 값을 저장해 보내거나 불러와 표시할 수 있다.
Search를 위한 분류 선택이나 글의 카테고리 지정 등으로 활용할 수 있다.
기본적인 구성은 다음과 같다.
아래 구성은 아무것도 골라지지 않은 상태로 로드된다.
<templete>
...
<select v-model="dataId" class="지정 스타일">
<option value="0">Black</option>
<option value="1">White</option>
</select>
...
</templete>
<script>
export default {
data() {
return {
dataId = '',
...
};
};
},
...
<script>
✔ 보이는 초기값 설정하기
select에 초기값을 설정하고 싶다면 어떻게 해야 할까?
아래 코드를 활용하면 간단하게 설정할 수 있다.
<select v-model="dataId" class="지정 스타일">
<option value="">All</option>
<option value="0">Black</option>
<option value="1">White</option>
</select>코드를 보면 알 수 있겠지만, v-model로 바인딩한 데이터에 저장된 값이 없는 상태라면 "null"의 값을 갖게 된다. 그래서 그냥 null로 설정해 주면 디폴트 값을 노출시킬 수 있다.
이 방법을 이용해서 초기값을 '전체'로 설정하여 검색을 수행시킬 수도 있고,
페이지 레이아웃에 따라 select에 "~~을 선택하세요." 라는 문구를 노출시키는 등으로 활용할 수 있다.
공식 가이드를 읽어보는 걸 잊지 마세요! 👩🏫
