使用例

入力してください入力してください

0 / 10

refで定義したinputをテキストフィールドのv-modelに設定して、入力値をinputで保持しています。

Props

clearable

propsにclearableを設定することで、入力値を一括で削除できるクリアボタンを表示することができます。

counter

propsにcounterを設定することで、入力文字数をカウントすることができます。

また、maxlengthを一緒に設定することで、最大文字数を設定することもできます。
バリデーションはされず、入力を制限するだけです。

template

<template>
  <v-container fluid>
    <v-text-field
      v-model="input"
      label="入力してください"
      placeholder="Placeholder"
      color="primary"
      clearable
      counter="10"
      maxlength="10"
    ></v-text-field>
    <p v-if="input">ここに入力した文字列が表示されます: <br/>{{ input }}</p>
  </v-container>
</template>

script

<script setup lang="ts">
import { ref } from 'vue'

const input = ref('')
</script>

color

propsではbase-color, bgcolor, colorが設定可能です。 各propsの設定によって、テキストフィールドの色が変更できることが以下のサンプルで確認できます。

ColorColor

primary

colorの設定

colorを設定すると、focus時のlabelとボーダー下部の色が変化します。

LabelLabel

base-colorの設定

base-colorを設定すると、focus時以外のボーダー下部の色が変化します。

LabelLabel

bg-colorの設定

bg-colorを設定すると、フィールド内の色が変化します。

LabelLabel

template

<template>
  <v-container fluid>
    <v-select
      v-model="color"
      :items="colors"
      label="Color"
    ></v-select>
    <h4>colorの設定</h4>
    <p>colorを設定すると、focus時のlabelとボーダー下部の色が変化します。</p>
    <v-text-field
      v-model="input"
      label="Label"
      placeholder="Placeholder"
      :color="color"
    ></v-text-field>
    <h4>base-colorの設定</h4>
    <p>base-colorを設定すると、focus時以外のボーダー下部の色が変化します。</p>
    <v-text-field
      v-model="input"
      label="Label"
      placeholder="Placeholder"
      :base-color="color"
    ></v-text-field>
    <h4>bg-colorの設定</h4>
    <p>bg-colorを設定すると、フィールド内の色が変化します。</p>
    <v-text-field
      v-model="input"
      label="Label"
      placeholder="Placeholder"
      :bg-color="color"
    ></v-text-field>
  </v-container>
</template>

script

<script setup lang="ts">
import { ref } from 'vue'

const color = ref('primary')
const colors = ['primary', 'secondary', 'success', 'info', 'warning', 'error']
const input = ref('')
</script>

バリデーション

rulesにバリデーションルールを設定することで、バリデーションを行うことができます。

また、validate-onでバリデーションを行うタイミングも設定できます.

• blur: フォーカスが外れた時
• input: 入力された時（入力ごとに行う） などが設定できます。

試しにどちらかのテキストフィールドに10文字以上を入力してみると、エラーメッセージが表示されるタイミングが異なることが確認できます。

blurが入力を終えたタイミングまでエラーメッセージが表示されないのに対し、inputは入力ごとにエラーメッセージが表示されます。

validate-on : blur

LabelLabel

validate-on : input

LabelLabel

template

<template>
  <v-container fluid>
    <h4>validate-on : blur</h4>
    <v-text-field
      v-model="input"
      label="Label"
      placeholder="Placeholder"
      color="primary"
      :rules="rules"
      validate-on="blur"
      clearable
    ></v-text-field>
    <h4>validate-on : input</h4>
    <v-text-field
      v-model="input"
      label="Label"
      placeholder="Placeholder"
      color="primary"
      :rules="rules"
      validate-on="input"
      clearable
    ></v-text-field>
  </v-container>
</template>

script

<script setup lang="ts">
import { ref } from 'vue'

const input = ref('')

const rules = [
  (v: string) => !!v || '入力してください',
  (v: string) => (v && v.length <= 10) || '10文字以内で入力してください'
]
</script>