BonBonSlick
@BonBonSlick
Vanilla Web Architect

Vuetify v-text-field rules not work?

data () {
            return {
                show2: false,
                show3: false,
                error: false,
                rules: {
                    required:    value => !!value || 'Required.',
                    min:         value => value.length >= 8 || 'Min 8 characters',
                    upperLetter: value => this.isUpperCasePresent({string: value}) ||
                                          'At least one upper case letter required',
                    number:      value => this.isNumberPresent({string: value}) || 'At least one digit number required',
                },
            }
        },

or
computed: {
            rules ( ) {
                return {
                    required:    value => !!value || 'Required.',
                    min:         v => v.length >= 8 || 'Min 8 characters',
                    upperLetter: v => this.isUpperCasePresent({string: v}) || 'At least one upper case letter required',
                    number:      v => this.isNumberPresent({string: v}) || 'At least one digit number required',
                };
            },

:rules="[
                                          rules.required,
                                       rules.min,
                                       rules.upperLetter,
                                       rules.number,
                                       ]"
client.js?06a0:77 TypeError: Cannot read property 'length' of undefined
    at min (password-reset.vue?6b2a:137)

или еще так
:rules="this.rules"

rules () {
                return [
                    value => !!value || 'Required.',
                    value => value.length >= 8 || 'Min 8 characters',
                ];
            },

А если так
:rules="[this.required, this.min,]"
methods: {
    required:    value => !!value || 'Required.',
            min:         value => value.length >= 8 || 'Min 8 characters',

console.ts?522c:34 [Vuetify] Rules should return a string or boolean, received 'undefined' instead

found in

---> <VTextField>
       <VForm>


Для всех вариантов выше, ошибки.
Пускай и в тестах тут все работает, почему тогда не передает значение поля?
Не работает етот мусор потому что не может передать значение
5f47b73768f1b221028071.png

или зачем тогда в офф доках выкладывать образец который работает только у них?
  • Вопрос задан
  • 23 просмотра
Решения вопроса 1
BonBonSlick
@BonBonSlick Автор вопроса
Vanilla Web Architect
В общем, баг в том, что если в поле ничего нет то выдает ошибку.
Если добавлены правила валидации то нельзя добавлять опцию, параметр clearable и обязательно выставить начальное значение. Будь то строка или номер.

Естественно в доках ето не указано. Потому что там самый примитивные v-model case без vuex.

так не сработает
v-model="this.fields.newPassword"

для дефолта
:value="this.fields.newPassword"
но нельзя ставить clearable
<v-text-field
                                :rules="[rules.min, rules.required]" <<< ---- REMOVE if clearable 
                                :value="this.fields.newPassword" <<< ---- ADD
                                type="password"
                                autofocus
                                background-color="#f0f0f0"
                                clear-icon="fas fa-times"
                                color="#0b236b"
                                placeholder="New password"
                                solo-inverted
                                flat
                                clearable <<< ---- REMOVE if rules 
                                required
                                counter
                                class="caption"
                                :color="this.violations.newPassword?'red':'#0b236b'"
                                :append-icon="show2 ? 'mdi-eye' : 'mdi-eye-off'"
                                :type="show2 ? 'text' : 'password'"
                                @click:append="show2 = !show2"
                                hint="Password must be at least 8 characters, contain an
                                                upper case letter and a number."
                                @change="updateField({ fields: [ {fieldName:  'newPassword', fieldValue: $event,}, ], })"
                        />
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы