셀렉트 (Select)

셀렉트 필드 컴포넌트는 옵션 목록에서 사용자가 제공하는 정보를 수집하는데 사용됩니다.

사용법


API

v-select
이름
append-icon
디폴트
'$vuetify.icons.dropdown'
타입
string
이름
append-icon-cb
디폴트
null
타입
function
New in — v1.1
이름
append-outer-icon
디폴트
undefined
타입
string
New in — v1.1
이름
append-outer-icon-cb
디폴트
null
타입
function
이름
attach
디폴트
false
타입
any

Specifies which DOM element that this component should detach to. Use either a CSS selector string or an object reference to the element.

Deprecated in — v1.1
이름
autocomplete
디폴트
false
타입
boolean

사용자 인풋에 기반하여 리스트안의 아이템들을 필터링합니다.

이름
autofocus
디폴트
false
타입
boolean

오토 포커스 활성화

이름
background-color
디폴트
undefined
타입
string
이름
box
디폴트
false
타입
boolean

대체 박스 인풋 스타일을 적용

이름
browser-autocomplete
디폴트
'on'
타입
string

autocomplete prop을 사용할때 검색 인풋을 위한 autocomplete prop을 설정합니다.(??)

이름
cache-items
디폴트
false
타입
boolean

items prop으로 넘겨진 모든 항목의 유니크한 로컬 사본을 보관합니다.

이름
chips
디폴트
false
타입
boolean

Changes display of selections to chips

이름
clear-icon
디폴트
'$vuetify.icons.clear'
타입
string
이름
clear-icon-cb
디폴트
null
타입
function
이름
clearable
디폴트
false
타입
boolean

Add input clear functionality, default icon is Material Icons clear

이름
color
디폴트
'primary'
타입
string

컨트롤에 색상을 지정

Deprecated in — v1.1
이름
combobox
디폴트
false
타입
boolean

태그 를 위한 단일 셀렉션의 한 종류

이름
counter
디폴트
undefined
타입
boolean | number | string

인풋 길이 카운터를 생성. 넘버가 지정되지 않으면 25가 기본 값으로 쓰입니다. 검증(validation)은 적용되지 않습니다.

이름
dark
디폴트
false
타입
boolean

다크 테마를 적용

이름
deletable-chips
디폴트
false
타입
boolean

선택된 칩(chip)에 삭제(remove) 아이콘을 추가

이름
dense
디폴트
false
타입
boolean

리스트 항목의 최대 높이를 낮춤

이름
disabled
디폴트
false
타입
boolean

인풋(input)을 비활성화

이름
dont-fill-mask-blanks
디폴트
false
타입
boolean

Disables the automatic character display when typing

Deprecated in — v1.1
이름
editable
디폴트
false
타입
boolean

편집 버튼을 생성 - 스펙

이름
error
디폴트
false
타입
boolean

수동으로 인풋을 에러 상태로 만듬

이름
error-count
디폴트
1
타입
number | string
이름
error-messages
디폴트
[]
타입
string | array

인풋을 에러 상태로 만들고 커스텀 에러메시지를 전달. rules prop에 의해 발생하는 임이의 검증과 결합가능. 이 필드가 검증을 호출하지는 않습니다.

이름
filter
디폴트
(item: object, queryText: string, itemText: string) => boolean
타입

항목 필터링에 사용되는 함수

이름
flat
디폴트
false
타입
boolean
이름
full-width
디폴트
false
타입
boolean

인풋 타입을 전체-너비로 설정

이름
height
디폴트
undefined
타입
number | string

컴포넌트의 높이를 설정

이름
hide-details
디폴트
false
타입
boolean
이름
hide-selected
디폴트
false
타입
boolean

이미 선택된 셀렉트 메뉴 항목을 보여주지 않음

이름
hint
디폴트
undefined
타입
string
이름
item-avatar
디폴트
avatar
타입
string | array | function

항목 의 아바타 값 속성을 설정

이름
item-disabled
디폴트
disabled
타입
string | array | function

항목 의 비활성화(disabled) 값 속성을 설정

이름
item-text
디폴트
text
타입
string | array | function

항목 의 텍스트 값 속성을 설정

이름
item-value
디폴트
value
타입
string | array | function

항목 의 값 속성을 설정

이름
items
디폴트
[]
타입
array

오브젝트 배열이나 문자열 배열. 오브젝트를 사용하면 text 와 value 필드를 사용. 이는 item-textitem-value 를 사용해서 바꿀 수 있습니다.

이름
label
디폴트
undefined
타입
string
이름
light
디폴트
false
타입
boolean

라이트 테마를 적용

이름
loading
디폴트
false
타입
boolean | string

선형 프로그레스바를 표시. 프로그레스바의 색을 나타내는 문자열(마테리얼 이나 테마 색상 - primary, secondary, success, info, warning, error)이나 부울값(boolean) 이 가능. 부울값의 경우 컴포넌트 색상(컴포넌트가 지원할 경우 color prop으로 지정된 값)이나 primary 색상이 사용됨

이름
mask
디폴트
undefined
타입
object | string

Apply a custom character mask to the input. See mask table above for more information

New in — v1.2
이름
menu-props
디폴트
{ "closeOnClick": false, "closeOnContentClick": false, "openOnClick": false, "maxHeight": 300 }
타입
string | array | object
이름
messages
디폴트
[]
타입
string | array
이름
multiple
디폴트
false
타입
boolean

복수 선택이 가능하도록 변경. 값의 배열을 받음(?).

이름
no-data-text
디폴트
'$vuetify.noDataText'
타입
string

데이타가 없을때 보여줄 텍스트

이름
open-on-clear
디폴트
false
타입
boolean

clearable prop을 사용할때, 일단 한번 클리어되면 현재 상태에 따라 선택 메뉴가 열리거나 열려있게 됩니다. When using the clearable prop, once cleared

이름
outline
디폴트
false
타입
boolean
Deprecated in — v1.1
이름
overflow
디폴트
false
타입
boolean

오버플로우 버튼을 생성 - 스펙

이름
persistent-hint
디폴트
false
타입
boolean
이름
placeholder
디폴트
undefined
타입
string
이름
prefix
디폴트
undefined
타입
string

접두사(prefix) 표시

이름
prepend-icon
디폴트
undefined
타입
string
이름
prepend-icon-cb
디폴트
null
타입
function
New in — v1.1
이름
prepend-inner-icon
디폴트
undefined
타입
string
New in — v1.1
이름
prepend-inner-icon-cb
디폴트
null
타입
function
이름
readonly
디폴트
false
타입
boolean
이름
return-masked-value
디폴트
false
타입
boolean

Returns the unmodified masked string

이름
return-object
디폴트
false
타입
boolean

선택시 item-value 로 지정된 값이 아니라 오브젝트가 바로 반환되도록 바꿈.

New in — v1.1
이름
reverse
디폴트
false
타입
boolean
이름
rules
디폴트
[]
타입
array

True나 에러메시지 문자열을 반환하는 함수들의 배열

이름
search-input
디폴트
undefined
타입
any

Bound when using the autocomplete prop. Use the .sync modifier to catch user input from the autocomplete search input

Deprecated in — v1.1
이름
segmented
디폴트
false
타입
boolean

Creates a segmented button - spec

이름
single-line
디폴트
false
타입
boolean

Label does not move on focus/dirty

New in — v1.1
이름
small-chips
디폴트
false
타입
boolean
이름
solo
디폴트
false
타입
boolean
이름
solo-inverted
디폴트
false
타입
boolean
New in — v1.1
이름
success
디폴트
false
타입
boolean
New in — v1.1
이름
success-messages
디폴트
[]
타입
string | array
이름
suffix
디폴트
undefined
타입
string

접미사(suffix) 표시

Deprecated in — v1.1
이름
tags
디폴트
false
타입
boolean

태그 기능. 사용자가 items prop에 없는 새로운 값을 만들 수 있게해줌

이름
type
디폴트
'text'
타입
string

인풋 타입을 설정

이름
validate-on-blur
디폴트
false
타입
boolean

blur 이벤트까지 검증을 지연

이름
value
디폴트
undefined
타입
any

표시여부를 조절 (Controls visibility)

이름
value-comparator
디폴트
(a: any, b: any) => boolean
타입
function

Apply a custom value comparator function

보충

Mask legend
MaskDescription
Masks
#Any digit
AAny capital letter
aAny small letter
NAny capital alphanumeric character
nAny small alphanumeric character
XAny special symbol (-!$%^&*()_+|~=`{}[]:";'<>?,./\) or space
Pre-made
credit-card#### - #### - #### - ####
date-with-time##/##/#### ##:##
phone(###) ### - ####
social###-##-####
time##:##
time-with-seconds##:##:##

예제

라이트 테마 (Light theme)

표준 단일 셀렉트는 다양한 설정 옵션을 가지고 있습니다.


아이콘 (Icons)

앞이나 뒤에 커스텀 아이콘 붙이세요


복수선택 (Multiple)

multi-select 에서 선택된 항목들을 보여줄때 v-chip을 사용할 수 있습니다.


항목 텍스트와 값의 커스터마이즈 (Customized item text and value)

텍스트와 값 필드에 해당하는 항목 배열 내의 특정 속성을 지정할 수 있습니다. 기본값은 textvalue 입니다. 이 예제에서는 선택된 아이템의 전체 오브젝트를 반환하는 return-opject prop을 사용합니다..


Prepend/Append item slotsNew in v1.2

The v-select components can be optionally expanded with prepended and appended items. This is perfect for customized select-all functionality.


Change selection apperance

The selection scoped slot can be used to customize the way selected values are shown in the input. This is great when you want something like foo (+20 others) or don't want the selection to occupy multiple lines.