v-inputコンポーネントは、独自のカスタム入力を作成するためのベースラインを提供します。これは、プリペンド/アペンドスロット、メッセージ、およびデフォルトスロットで構成されます。このコンポーネントを拡張することを 推奨 しますが、単体でも使用できます。
v-input には4つの主要領域があります。prepended slot、appended slot、default slot、およびmessages。これらは、すべてのフォームコンポーネント間で共有されるコアロジックを構成します。
v-inputコンポーネントは、Vuetify フォームコントロールの全てのラッパーとして使用されます。内部入力に渡される予定であるため、属性は 継承されません 。
以下に、簡単な例から複雑な例まで示します。
v-inputは、データ読み込み表示などで使用できる loading 状態を持っています。注： v-text-fieldは単なる例です。
v-input は hint を持つことができ、hint で入力の使い方をユーザに伝えることができます。persistent-hint propはメッセージが表示されていない場合に常にヒントを表示するようにします。
バリデーション可能なVuetifyコンポーネントとして、success propを使用してv-inputを成功状態に設定することができ、success-messages propを使用してメッセージを追加することができます。
バリデーション可能なVuetifyコンポーネントとして、error propを使用してv-inputをエラー状態に設定することができ、メッセージはerror-messages propを使用して追加することができます。error-countプロパティを使用して、表示するエラー メッセージ数を決定できます。
error-countプロパティを使用することで、複数のエラーをv-inputに追加することができます。
trueもしくはエラーメッセージを返す関数を追加することで、v-inputにカスタムバリデーションを追加することができます。
hide-detailsにautoを設定すると、の表示するべきメッセージ (ヒントやエラーメッセージなど) がある場合のみ表示されます。
v-inputには append およびprepend スロットがあります。それらにカスタムアイコンを配置できます。
v-inputはclick:appendとclick:prependイベントをスロットに追加できます。注意：v-text-fieldは例として使用しています。