Vue 셀렉트박스 여러개 구현하기

Vue 에서는 v-model 이라는 v-on 과 v-bind 가 결합된 형태를 지원한다.

이를 이용해서 셀렉트박스 여러개를 만들어보고자 한다.

 

아래는 평범한 v-model 로 만든 1개의 셀렉트 박스이다.

<select v-model="partSelectModel" class="admin-table-select">
	<option
    	v-for="(boards, index) in board"
    	:key="'part' + index"
    	class="admin-table-option"
    	:value="board.value"
    >
    	{{ boards.sub }}
    	</option>
    </select>

data() {
	return {
		partSelectModel: "0",
		board: [
			{ sub: "선택", value: "0" },
			{ sub: "1", value: "1" },
			{ sub: "2", value: "2" },
			{ sub: "3", value: "3" }
		]
	}
  }

기본 바인딩 된 데이터를 보여줄때는 우리가 흔히 사용했던 html selected 는 v-model 을 사용해서 만든다면 정상 작동하지 않는다.

 v-model 에 바인딩 된 값과 option value 값과 동일한 값이 selected 가 되어 보여진다. 

 

그럼 여러개의 셀렉트 박스를 만들고 싶을때는 반복문을 사용해서 만들면 되지 않을까?

결론부터 말하자면 아니다. v-model 은 v-bind 이기 때문에 1개 당 1개의 바인딩만 가능하다.

 

유니크한 셀렉트 박스 여러개를 만들고 싶다면 v-model 을 여러개 선언해주자.

selected: {
    model1: '',
    model2: '',
    model3: '',
    ...
}

v-model="selected.model1"

 

아래의 방향도 가능하지만 추천하지 않는다.

selected: []
v-model = "selected[0]"

배열로 관리 할 수도 있지만, validation 을 할 때 각 변수별로 체크하기 위해 각각 선언되는게 좋기때문이다.

배열로 했을 경우, 0번째를 건너뛰고 1번째를 먼저 선택하게 되면 selected[0] 이 undefined 가 된다.

결국 validation 을 진행할때 selected[0] 에 대해 undefined 을 체크해야 하는 번거러움이 생긴다.

 

결론은 썩 기분이 좋지는 않다. 셀렉트 박스만큼 v-model 을 만들어줘야 한다는게 코드가 난잡해지는 것 같은 기분이 들기 때문이다.