web-dev-qa-db-ja.com

必要に応じてフィールドをマークする方法をVuetify

インターネットでフォームに記入しようとすると、必須フィールドは赤い「*」マークでマークされ、そのフィールドが必須であることを示します。

そのようにvuetify.jsの必須フィールドにユーザーを示す方法はありますか？

vuejs2vuetify.js
8
Pathum Kalhan

v1.1.0 docs から：

必要な小道具が明示的にアスタリスクをラベルに追加しなくなりました。検証のための機能はすべてv1.0で削除されました。

したがって、明らかに必要なものを設定するものは何もないので、手動でラベルに追加する必要があります。

label="Name*"

または、CSSを使用することもできます。

.required label::after {
    content: "*";
}

requiredクラスを手動で追加する必要がある場合（もちろんクラスの名前は任意です）。

6
Traxo

ルールプロップを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>
2
PoorBob

少し面倒ですが、「ラベル」という名前のスロットがあり、次のようなことができます。

<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>
0
D Durham

パフォーマンスに関しては、これが最善の解決策かどうかはわかりません。しかし、それは機能します。

以下の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;
}
0
Almino Melo