Vuetifyのrulesを使う。
Vuetifyのrulesを使うことで比較的簡単に実装できます。
なので今回はvuetifyのrulesを使います。
前にはてなブログでvuetifyについて簡単に書いた記事書きました。
https://taitoajiki.hatenablog.com/entry/2019/10/21/232910
いざ、実装
<template>
<v-text-field solo :counter="10" :rules="bbb"></v-text-field>
</template>
<script src="./Rules.ts"></script>
private bbb: any = [
(v: any) => !!v || "Name is required",
(v: any) => this.nameRules(v)
];
private nameRules(value: any): any {
return value.length <= 10 || "Name must be less than 10 characters";
}
ポイント
rulesは配列にすること。
入力文字されたがコードのvに入ってくること。
そしてbbbの中の関数はfalseの場合に何の文字を
falseのときにどんな文字を表示をさせるのかが大事です。
説明
nameRulesを説明すると、returnを見てもらうと
入力文字が10文字以下の場合はtrueを返します。
そして10文字以上のはfalseとなって表示する文字が返却される。
という感じです。
はてなブログ、Twitterやってます。
Twitterを始めました。始めたばかりで友達少ないのでフォロー待ってます！
Twitterはこちら⬇︎
https://twitter.com/apasn1
はてなブログはこちら⬇︎
https://taitoajiki.hatenablog.com/