Vuetify как пометить поле как требуется

Question

Когда мы пытаемся заполнить формы в Интернете, обязательные поля помечаются красным знаком '*', чтобы указать, что поле является обязательным.

Например, есть ли способ указать пользователям обязательные поля в vuetify.js?

Answer 1

Из v1.1.0 документов :

Требуемая опора больше явно не добавляет звездочку к метке. Вся его функциональность до валидации была удалена для v1.0.

Так что, очевидно, ничто больше не установит его так, как требуется, мы должны добавить его вручную в метку:

label="Name*"

---

Или вы можете использовать CSS:

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

То есть вы должны добавить required класс вручную (имя класса конечно произвольно).

Answer 2

Производительность мудрая, я не знаю, является ли это лучшим решением. Но это работает.

Импортируйте приведенный ниже файл JavaScript в загрузочную версию приложения (или что-то в этом роде).

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. Включите его путь в массив plugins в файле nuxt.config.js.

Добавьте приведенное ниже правило в свою глобальную CSS / тему.

.v-label  > .required.sign {
    color: darkred;
    font-weight: bold;
    margin-left: .25em;
}

Answer 3

Вы можете передать правила для 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>