インターネットでフォームに記入しようとすると、必須フィールドは赤い「*」マークでマークされ、そのフィールドが必須であることを示します。
そのようにvuetify.jsの必須フィールドにユーザーを示す方法はありますか?
v1.1.0 docs から:
必要な小道具が明示的にアスタリスクをラベルに追加しなくなりました。検証のための機能はすべてv1.0で削除されました。
したがって、明らかに必要なものを設定するものは何もないので、手動でラベルに追加する必要があります。
label="Name*"
または、CSSを使用することもできます。
.required label::after {
content: "*";
}
required
クラスを手動で追加する必要がある場合(もちろんクラスの名前は任意です)。
ルールプロップをv-text-field
に渡すことができます。
例えば、
<v-text-field
v-model="title"
:rules="['Required']"
label="Title"
counter
maxlength="20"
></v-text-field>
詳細については、このVuetifyの例を参照してください。 https://github.com/vuetifyjs/vuetifyjs.com/blob/master/src/examples/text-fields/validation.vue
required
もHTMLプロパティです。次のようにHTML要素に追加するだけです。
<v-text-field
v-model="title"
label="Title"
counter
maxlength="20"
required
></v-text-field>
少し面倒ですが、「ラベル」という名前のスロットがあり、次のようなことができます。
<v-text-field
v-model="loginInfo.email"
autofocus
name="email"
type="email">
<template #label>
<span class="red--text"><strong>* </strong></span>Email
</template>
</v-text-field>
パフォーマンスに関しては、これが最善の解決策かどうかはわかりません。しかし、それは機能します。
以下のJavaScriptファイルをアプリケーションにインポートしますbootstrap(またはそのようなもの)。
import Vue from 'vue';
Vue.mixin({
mounted() {
const e = this.$el;
if ('querySelector' in this.$el) {
const i = this.$el.querySelector('input[required]');
if (i !== null) {
const l = i.previousSibling;
if (l.querySelector('.required.sign') === null) {
const r = document.createElement('span');
// l.classList.add('required');
r.classList.add('required', 'sign');
r.appendChild(document.createTextNode('*'));
l.appendChild(r);
}
}
}
},
});
Nuxt.js:上記のファイルをplugins
フォルダに配置します。 nuxt.config.js
ファイルのplugins
配列にそのパスを含めます。
以下のルールをグローバルCSS /テーマに追加します。
.v-label > .required.sign {
color: darkred;
font-weight: bold;
margin-left: .25em;
}