[Vuetify] v-select에서 [object, object]가 표시되면 해결책

현상

items: [{id:1, text: 'テキスト'},{id:2, text: 'テキスト2'},{id:3, text: 'テキスト3'}]

위와 같은 객체의 배열을 v-select로 표시.

<v-select
 :items="items"
/>

그러면 다음과 같이 [object, object] 라고 표시된다.

해결책

vuetify의 공식 페이지에는 객체 사용시의 설명이 있었다.

items-text 사용

item-text="オブジェクトのプロパティ名" 사용하여 해결

<v-select
 item-text="text"
 :items="items"
/>

items-value를 사용하여 값 지정

어디까지나 표시는 할 수 있었지만, 필터링할 때 등, 표시와 뒤로 유지하는 값을 각각 나누고 싶은 경우는 items-value 를 사용한다.

실제로 값을 확인하기 위해 @change="changedValue"를 추가하고 select 선택시 console.log에서 값을 출력합니다.

<v-select
 item-text="text"
 item-value="id"
 :items="items"
 @change="changedValue"
/>

methods: {
 changedValue(value) {
  console.log('value', value)
 }
}

表示 値

무사, 표시와 값을 나눌 수 있었으므로 해결.

참고문헌