Vuetify - 삽질 기록(v-select 에서 선택한 값 객체 통으로 리턴하기)

업무 중에 vuetify 쓰다가 삽질한 거 기록하려고 쓴다.

[문제]

DB에서 select 해온 데이터 리스트를 v-select에 넣어서 선택하면  @click 으로 클릭 이벤트 걸어서 리턴값으로 객체를 통으로 넘겨주고 싶었는데 아무리해도 값이 안 넘어가는 것이다! 😭😭😭😭😭

v-model에 변수 설정해두고 그걸로 가져오려고 콘솔을 계속 찍어왔는데

아무리해도 단일값만 넘어옴 

계속 보다보니 :item-value에 설정한 값만 넘어오는 걸 발견했다 

 

// 참고로 내가 말하는 리스트 형태는 이렇게 생겼다.

memberList [
	{
		name:'뷰',
		age: '11'
	},
    {
		name:'뷰티파이',
		age: '111'
	},
    ...
]

공식 문서 계속 뒤지다가 'return-object' 라는 속성값을 발견 

이름부터 객체를 통으로 리턴해주는 그런 놈 같아서 한번 넣어봤는데..성공..^^

<v-select
  v-model="selectedObj"
  label="고르세요"
  :items="memberList"
  item-text="name"
  item-value="age"
  return-object
  >
</v-select>

사용할 때 이런식으로 해주면  v-model에 바인딩된 selectedObj라는 객체가 통으로 리턴된다.

 

오늘도 느끼는 공식문서의 중요성 .... 😇