More than 3 years have passed since last update.

Vuetifyのv-text-fieldに必須マークを入れる

Last updated at 2022-03-03Posted at 2022-03-03

v-text-fieldに下記のような*マークを追加しました。

概要

Vuetifyのv-text-fieldを使えば、簡単にリッチなテキストボックスを作成できます。
rulesを用いることで必須等のvalidationも簡単に実装できます。

<v-text-field placeholder="名前" label="名前" :rules="requireRule"/>

入力エラーとなる場合は下記のような表示となりますが、テキストボックスにフォーカスがあたってからエラーが表示されるため
画面表示時にどの項目が必須かどうか分かりづらいことがありました。

必須項目を表す*マークを赤字でlabelに埋め込めたらいいなと思ったので、調べて実装してみました。

下記で実現できました。

<v-text-field placeholder="名前" :rules="requireRule">
  <template v-slot:label>
    名前<span style="color: red"> *</span>
  </template>
</v-text-field>

公式ページのslotsにlabelが記載されており、<template>で上書きすることができました。
<template>の中にはHTMLタグを記載することができるので*の部分のみstyleを指定しています。

<template>の中にv-btnやv-iconを入れることでマーク自体も色々変更できそうです。