Вопрос:

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

vuejs2 vuetify.js

4297 просмотра

3 ответа

1124 Репутация автора

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

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

Надеюсь, мой вопрос понятен. Спасибо заранее!

Автор: Pathum Samararathna Источник Размещён: 04.09.2018 04:11

Ответы (3)


1 плюс

320 Репутация автора

Вы можете передать правила для 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>
Автор: PoorBob Размещён: 04.09.2018 04:18

5 плюса

6634 Репутация автора

Решение

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

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

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

label="Name*"

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

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

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

Автор: Traxo Размещён: 22.10.2018 06:42

0 плюса

137 Репутация автора

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

Импортируйте приведенный ниже файл 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;
}
Автор: Almino Melo Размещён: 12.06.2019 09:41
Вопросы из категории :
32x32