Vuetify

ショップ

企業向け

v-autocomplete コンポーネントはシンプルで柔軟な先行入力機能を提供します。これは大量のデータを検索するときや、APIから動的に情報を要求するときにも便利です。

オートコンプリートコンポーネントは v-select を拡張し、要素をフィルタする機能を追加しています。

Options

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

動的データを簡単にフックアップして、独自のエクスペリエンスを作りましょう。v-autocompleteの豊富なpropリストにより、入力のあらゆる面を簡単に微調整することができます。

'filter' propを使用して、カスタムロジックで個々の項目をフィルター処理できます。この例では、名前でアイテムをフィルタリングします

dense propを使うと、オートコンプリートの高さを減らし、リスト項目の最大高さを下げることができます。

slotの活用により、選択の視覚的出力をカスタマイズできます。この例では、チップとリストアイテムの両方にプロファイル画像を追加します。

検索クエリに基づいて外部からデータを読み込む必要がある場合があります。autocomplete propを使用するときは、search-input propを .sync 修飾子と一緒に使ってください。また、新しい cache-items propも利用します。これは items propに渡されたすべてのアイテムの一意のリストを保持し、非同期アイテムと multiple propを使う場合は 必須 です。

v-autocomplete コンポーネントは非常に柔軟性が高く、あらゆるユースケースに対応できます。no-dataitem および selectionスロットのカスタム表示を作成して、ユニークなユーザー体験を提供します。slots を使用すると、アプリケーションの外観を簡単にカスタマイズすることができます。

v-autocomplete スロットとトランジションを組み合わせて使用すると、この状態セレクタのような、スタイリッシュな切り替え可能なオートコンプリートフィールドを作成できます。

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!