[VueJS] Vuetify v-select에서 text, value값 가져오기

return-object 속성을 주면 된다.

 

먼저 속성을 안 주고 사용했을 때의 값 예시

<v-select
  v-model="user_auth"
  label="권한*"
  :items="authList"
  item-text="name"
  item-value="value"
  :rules="user_auth_rule"
  >
</v-select>

data() {
    return {
      authList: [
        { name: '관리자', value: 'A'},
        { name: '일반 사용자', value: 'M'}
      ],
      user_auth: '',
      user_auth_rule: [
        v => !!v || '권한은 필수 선택 사항입니다.'
      ],
    }
  },

위 소스로 구현된 v-select

이제 셀렉트 박스를 선택 후 버튼을 눌러서 this.user_auth를 console.log로 찍어보면

결과

선택한 데이터의 value값만 가지고 온다.

보통의 경우에는 이렇게만 써도 상관은 없지만 종종 value값과 해당 text도 가지고 와야 할 때가 있는데

그럴 때 return_object를 사용하면 된다.

 

사용했을 때의 예시 

<v-select
  v-model="user_auth"
  label="권한*"
  :items="authList"
  item-text="name"
  item-value="value"
  :rules="user_auth_rule"
  return-object
  >
</v-select>

return-object 속성을 추가하고 this.user_auth를 찍어보면 

오브젝트 형식으로 출력이 되고, 안에 name과 value가 들어있다.

내 소스는 v-select 안에다 속성으로 item-text와 item-value를 추가했고,

데이터 객체 안에 authList의 구조에 맞춰서 넣었기 때문에 name과 value라고 나왔다.

사용하는 사람들은 자신의 소스에 맞춰서 잘 확인해야 한다.