Selects

選択フィールドコンポーネントは、オプションのリストからユーザーが提供した情報を収集するために使用されます。

使い方

<v-select label="Select" :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']" ></v-select>

Zero PRO — is a carefully crafted multi-purpose, responsive, and gorgeous theme.

API

コンポーネント	解説
v-select	主要コンポーネント
v-autocomplete	高度なフィルタリングを可能にするセレクトコンポーネント
v-combobox	フィルタリングとカスタム値を可能にするセレクトコンポーネント

インライン API の切り替え

注意事項

items prop にオブジェクトを使用するときは、item-title および item-value をオブジェクト上の既存のプロパティに関連付ける必要があります。これらの値はデフォルトで title および value に設定されており、変更することができます。

ガイド

v-select コンポーネントは標準の <select> 要素の直接的な代替として意図されています。これは一般的に v-formや他の入力コントロールと共に使用されます。

Props

すべてのフォーム入力には、自分の好きなように簡単に設定できる大規模なAPIがあります。

Density

density prop を使用して、コンポーネント内の縦の間隔を調整することができます。

Multiple

multiple prop は、複数選択を可能にします。

Pick your favorite states

Chips

chips prop で、選択したアイテムをチップとして表示します。

Readonly

v-select の readonly prop を使用すると、ユーザが値を変更できなくなります。

Disabled

disabled prop を v-select に適用すると、ユーザーがコンポーネントとやりとりすることが出来なくなります。

Custom title and value

アイテム配列内の特定のプロパティを指定して、タイトルと値のフィールドに対応させることができます。デフォルトでは、これは title と value です。この例では、アイテムを選択した際に、アイテムの全てのオブジェクトを返す return-object prop も使用しています。

Florida, FL

Custom item props

便宜上、item-title と item-value が提供されており、追加の prop は item スロットを通じて (下記参照)、または itemProps prop を使用してリストアイテムに渡すことができます。タイトルや値と同じように、デフォルト値は "props" であり、これにより各アイテムオブジェクトの props キーにあるすべてがリストアイテムに渡されます。

const items = [
  {
    title: 'John',
    props: { subtitle: 'Engineering' },
  },
]

:item-props="true" を使用すると、アイテムオブジェクト全体が prop として使用されます。これにより item-title と item-value が上書きされます。

const items = [
  {
    title: 'John',
    subtitle: 'Engineering',
  },
]

または、独自の変換関数を itemProps に渡して、各アイテムの prop を生成することもできます。

利用可能な prop のリストについては、 VListItem APIを参照してください。

Slots

v-select コンポーネントは、コンポーネントの特定の部分の出力をカスタマイズしやすくするスロットを提供しています。これには prepend スロット、append スロット、selection スロット、no-data スロットが含まれます。

Item

アイテムスロットは、リスト内のアイテムのレンダリング方法を変更するために使用します。これには変換された item-title と item-value を含む InternalItemオブジェクトの item と、通常リストアイテムにバインドされる prop とイベントを含む props オブジェクトが提供されます。