VSelect API

Get updates on the latest happenings, release information and more on X (Twitter).

Props

name	type	default
`active`	boolean	false
アイテムの active 状態を制御します。これは通常、コンポーネントをハイライトするために使用されます。
`append-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
デフォルトコンテンツの後の append スロットに v-iconコンポーネントを作成します。
`autofocus`	boolean	false
オートフォーカスを有効にします。
`base-color`	string	undefined
フォーカスされていないときの入力の色を設定します。
`bg-color`	string	undefined
指定された色をコントロールの背景に適用します。color prop をサポートするコンポーネントに使用されます。- ユーティリティカラー (例: `success` や `purple`) またはCSSカラー (`#033` や `rgba(255, 0, 0, 0.5)`) に対応します。組み込みクラスのリストはカラーページで確認できます。
`center-affix`	boolean	undefined
Vertically align appendInner, prependInner, clearIcon and label in the center.
`chips`	boolean	false
選択項目の表示をチップに変更します。
`clearable`	boolean	false
コンポーネントをクリアすることができます。
`clear-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$clear'
clearable prop が true に設定されているときに使用されるアイコンです。
`closable-chips`	boolean	false
全ての v-chipコンポーネントで closableprop を有効にします。
`close-text`	string	'$vuetify.close'
インプットメニューを閉じたときに、インプットの `aria-label` と `title` に設定されるテキストです。
`color`	string	undefined
指定された色をコントロールに適用します。ユーティリティカラー (例えば `success` や `purple`) またはCSSカラー (`#033` や `rgba(255, 0, 0, 0.5)`) に対応しています。組み込みクラスのリストはカラーページで確認できます。
`counter`	string \| number \| boolean	false
入力長のカウンタを作成します。数値が指定されていない場合、デフォルトは 25 になります。バリデーションは適用しません。
`counter-value`	number \| ((value: any) => number)	undefined
関数はカウンター表示テキストを返します。
`density`	'default' \| 'comfortable' \| 'compact'	'default'
コンポーネントが使用する垂直方向の高さを調整します。
`direction`	'horizontal' \| 'vertical'	'horizontal'
入力の方向を変更します。
`disabled`	boolean	null
入力をクリックまたはターゲットする機能を削除します。
`eager`	boolean	false
コンポーネントのコンテンツがマウント時にレンダリングされるよう強制します。これは、DOMにレンダリングされないがSEOのためにクロールされることを望むコンテンツがある場合に便利です。
`error`	boolean	false
入力を手動でエラー状態にします。
`error-messages`	string \| string[]	[]
入力をエラー状態にし、カスタムエラーメッセージを通過させます。これは rules prop から発生するすべての検証と組み合わされます。このフィールドは検証をトリガーしません。
`flat`	boolean	false
エレベーションがあるバリアントを使用しているときは、ボックスシャドウを削除します。
`focused`	boolean	false
コンポーネントにフォーカス状態のスタイルを強制します。
`hide-details`	boolean \| 'auto'	false
ヒントやバリデーションエラーを非表示にします。 `auto` が設定されている場合、表示するメッセージ (ヒント、エラーメッセージ、カウンター値など) がある場合のみ表示します。
`hide-no-data`	boolean	false
表示するオプションがない場合、メニューを非表示にします。結果が非同期でフェッチされる前にメニューが開かないようにするのに役立ちます。 `items`配列がまだ開いていない場合は、変化したときにメニューを開く効果もあります。
`hide-selected`	boolean	false
既に選択されているアイテムをセレクトメニューに表示しません。
`hide-spin-buttons`	boolean	false
型が `number` に設定されている場合、入力のスピンボタンを非表示にします。
`hint`	string	undefined
フォーカスされると入力欄の下にヒントテキストを表示します。persistent-hint プロパティを使用して常に開いた状態にすることができます。
`id`	string	undefined
コンポーネントにDOM idを設定します。
`item-children`	SelectItemKey	false
このプロパティは現在効果がありません。
`item-color`	string	undefined
選択したアイテムの色を設定します。
`item-props`	SelectItemKey<any>	'props'
各アイテムコンポーネントに適用される props オブジェクトです。`true` は元のオブジェクトを生の props として扱い、コンポーネントに直接渡します。
`items`	any[]	[]
オブジェクトまたは文字列の配列であることができます。デフォルトでは、オブジェクトには title と value プロパティが必要で、任意で VListItem propを含む props プロパティを持つことができます。これらのキーは、item-title、item-value、item-props prop で変更することができます。
`item-title`	SelectItemKey<any>	'title'
タイトルを含む、提供された `items` のプロパティです。
`item-value`	SelectItemKey<any>	'value'
itemsの値のプロパティを設定します - プリミティブでなければなりません。ドット表記がサポートされています。注: これは現在 `v-combobox` ではサポートされていません GitHub Issue。
`label`	string	undefined
v-labelまたは v-field-labelコンポーネントのテキストを設定します。
`list-props`	unknown	undefined
`v-list` コンポーネントへ prop を渡します。v-listの prop から任意のオブジェクトを受け入れますが、キャメルケースのキーを推奨します。
`loading`	string \| boolean	false
線形プログレスバーを表示します。プログレスバーに適用する色を指定する文字列 (任意のマテリアルカラーやテーマカラー - primary、secondary、success、info、warning、error) 、またはコンポーネントの color (color propで設定 - コンポーネントでサポートされている場合) かプライマリーカラーを使用するBooleanを指定できます。
`max-errors`	string \| number	1
検証で表示されるエラーの最大数を制御します。
`max-width`	string \| number	undefined
コンテンツの横幅の最大値を設定します。
`menu`	boolean	false
デフォルトでは、メニューは開いた状態でレンダリングされます。
`menu-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$dropdown'
スピンアイコンを設定します。
`menu-props`	unknown	undefined
`v-menu` コンポーネントへ prop を渡します。v-menuの prop から任意のオブジェクトを受け入れますが、キャメルケースのキーを推奨します。
`messages`	string \| string[]	[]
メッセージのリストを表示します。文字列を使用している場合は単一のメッセージを表示します。
`min-width`	string \| number	undefined
選択した `v-menu` コンテンツの最小幅を設定します。
`model-modifiers`	unknown	undefined
内部でのみ使用
`model-value`	any	null
コンポーネントの v-model の値です。コンポーネントが multiple prop をサポートしている場合、デフォルトでは空の配列になります。
`multiple`	boolean	false
select を複数選択に変更します。値には配列を受け付けます。
`name`	string	undefined
コンポーネントのname属性を設定します。
`no-data-text`	string	'$vuetify.noDataText'
コンポーネントにアイテムが提供されていない場合に表示されるテキストです。
`open-on-clear`	boolean	false
clearable prop を使用する場合、クリアすると、選択メニューは現在の状態に応じて開くか、開いたままになります。
`open-text`	string	'$vuetify.open'
インプットメニューを開いたときに、インプットの aria-label と title に設定されるテキストです。
`persistent-clear`	boolean	false
入力がダーティ状態のときは、常にクリア可能なアイコンを表示します (デフォルトではホバー時のみ表示されます)。
`persistent-counter`	boolean	false
カウンターを常に表示するように強制します。
`persistent-hint`	boolean	false
hint を常に表示します。
`persistent-placeholder`	boolean	false
プレースホルダーを常に表示するよう強制します。
`placeholder`	string	undefined
入力欄のプレースホルダーのテキストを設定します。
`prefix`	string	undefined
プレフィックステキストを表示します。
`prepend-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
`v-icon` と同じ構文を使用して、コンポーネントの入力の外側の先頭にアイコンを追加します。
`prepend-inner-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
prepend-inner スロットに v-iconコンポーネントを作成します。
`readonly`	boolean	null
読み取り専用状態に設定します。
`return-object`	boolean	false
item-value で指定された値ではなく、オブジェクトを直接返すように選択時の動作を変更します。
`reverse`	boolean	false
向きを反転します。
`role`	string	'combobox'
入力に role 属性を適用します。
`rounded`	string \| number \| boolean	undefined
入力に border radius を追加します。
`rules`	ValidationRule[]	[]
`function`、`boolean`、`string` のタイプが混在した配列を受け入れます。関数は引数として入力値を受け取り、`true` / `false` またはエラーメッセージを含む `string` を返す必要があります。関数が `false` を返すか、配列内の任意の値が `string` である場合、入力フィールドはエラー状態になります。
`single-line`	boolean	false
フォーカス時やダーティ状態でもラベルが動かないようにします。
`suffix`	string	undefined
サフィックステキストを表示します。
`theme`	string	undefined
このコンポーネントとその全ての子要素のテーマを指定します。
`tile`	boolean	false
適用している border-radius をコンポーネントから削除します。
`transition`	\| string \| boolean \| (TransitionProps & { component: Component }) \| { component: Component }	{component: {name: 'VDialogTransition'}}
コンポーネントの遷移を設定します。組み込みの遷移または独自の遷移のいずれかにすることができます。
`type`	string	'text'
type属性を設定します。
`validate-on`	\| 'eager' \| 'lazy' \| 'blur' \| 'input' \| 'submit' \| 'invalid-input' \| 'blur lazy' \| 'input lazy' \| 'submit lazy' \| 'invalid-input lazy' \| 'blur eager' \| 'input eager' \| 'submit eager' \| 'invalid-input eager' \| 'lazy blur' \| 'lazy input' \| 'lazy submit' \| 'lazy invalid-input' \| 'eager blur' \| 'eager input' \| 'eager submit' \| 'eager invalid-input'	undefined
検証を実行するためにトリガーするイベントの種類を変更します。
`value-comparator`	(a: any, b: any) => boolean	undefined
model-value prop と items prop に含まれる値を比較するために、独自の比較アルゴリズムを適用します。
`variant`	\| 'outlined' \| 'plain' \| 'underlined' \| 'filled' \| 'solo' \| 'solo-inverted' \| 'solo-filled'	'filled'
コンポーネントに個別のスタイルを適用します。
`width`	string \| number	undefined
コンポーネントに横幅を設定します。

イベント

name	type
`click:append`	[MouseEvent]
追加アイコンがクリックされたときに発生します。
`click:appendInner`	[MouseEvent]
アペンドインナーアイコンがクリックされたときに発生します。
`click:clear`	[MouseEvent]
クリアアイコンをクリックしたときに発生します。
`click:prepend`	[MouseEvent]
プリペンドアイコンがクリックされたときに発生します。
`click:prependInner`	[MouseEvent]
プリペンドインナーアイコンがクリックされたときに発生します。
`update:focused`	[boolean]
入力がフォーカスされたり、フォーカスが外れたりしたときに発生します。
`update:menu`	[boolean]
コンポーネントのメニュー状態が変更されたときに発生するイベント。
`update:modelValue`	[any]
コンポーネントのモデルが変更されたときに発生するイベント。

Slots

{ id: ComputedRef<string> messagesId: ComputedRef<string> isDirty: ComputedRef<boolean> isDisabled: ComputedRef<boolean> isReadonly: ComputedRef<boolean> isPristine: Ref<boolean> isValid: ComputedRef<boolean | null> isValidating: Ref<boolean> reset: () => void resetValidation: () => void validate: () => void }

{ isActive: Ref<boolean> isFocused: Ref<boolean> controlRef: Ref<HTMLElement | undefined> focus: () => void blur: () => void }

never

{ item: ListItem; index: number; props: Record<string, unknown> }

{ isActive: Ref<boolean> isFocused: Ref<boolean> controlRef: Ref<HTMLElement | undefined> focus: () => void blur: () => void } & { props: Record<string, any> }

{ id: ComputedRef<string> messagesId: ComputedRef<string> isDirty: ComputedRef<boolean> isDisabled: ComputedRef<boolean> isReadonly: ComputedRef<boolean> isPristine: Ref<boolean> isValid: ComputedRef<boolean | null> isValidating: Ref<boolean> reset: () => void resetValidation: () => void validate: () => void }

{ item: ListItem; index: number; props: Record<string, unknown> }

{ isActive: Ref<boolean> isFocused: Ref<boolean> controlRef: Ref<HTMLElement | undefined> focus: () => void blur: () => void } & { label: string; props: Record<string, any> }

{ color: string; isActive: boolean }

{ message: string }

never

{ id: ComputedRef<string> messagesId: ComputedRef<string> isDirty: ComputedRef<boolean> isDisabled: ComputedRef<boolean> isReadonly: ComputedRef<boolean> isPristine: Ref<boolean> isValid: ComputedRef<boolean | null> isValidating: Ref<boolean> reset: () => void resetValidation: () => void validate: () => void }

{ isActive: Ref<boolean> isFocused: Ref<boolean> controlRef: Ref<HTMLElement | undefined> focus: () => void blur: () => void }

never

{ item: ListItem; index: number }

`append`
入力の内側で入力内容の後にアイテムを追加します.
`append-inner`
入力内容の中にアイテムを追加します。
`append-item`
メニューコンテンツの後にアイテムを追加します。
`chip`
chip prop を使用する際のカスタムチップ用のスロットです。
`clear`
カスタムクリアアイコンのスロットです (clearable prop が true のときに表示されます)。
`details`
messages の表示を変更するためのカスタム入力詳細用のスロットです。
`item`
カスタムアイテムの見た目を定義します。このスロットのルート要素は、`v-bind="props"` が適用された v-list-item でなければなりません。`props` にはデフォルトのセレクトリストの振る舞いに必要なすべてが含まれています。これにはタイトル、値、クリックハンドラー、仮想スクロール、`item-props`で追加されたその他の要素が含まれます。
`label`
v-labelまたは v-field-labelコンポーネントのデフォルトスロットです。
`loader`
カスタムローダーのスロット (loading prop が true のときに表示されます)。
`message`
メッセージの内容をカスタマイズするためのスロットです。
`no-data`
items が提供されていないときのコンテンツを定義します。
`prepend`
入力の外側で入力内容の前にアイテムを追加します。
`prepend-inner`
入力の前に追加されるスロットです。
`prepend-item`
メニューコンテンツの前にアイテムを追加します。
`selection`
カスタムの選択の外観を定義します。

公開済み

any

`[string]`
MISSING DESCRIPTION (edit in github)

SASS変数

name	default
`$select-chips-control-min-height`	null
`$select-chips-margin-bottom`	null
`$select-chips-margin-top`	null
`$select-content-border-radius`	4px
`$select-content-elevation`	4
`$select-line-height`	1.75
`$select-transition`	.2s settings.$standard-easing

#VSelect API

VSelect API