Vue js vee подтверждение пароля с помощью пользовательских компонентов - PullRequest
Новая
       35

Vue js vee подтверждение пароля с помощью пользовательских компонентов

1 голос
/ 29 мая 2019

Я использую vee-validate в моем проекте с пользовательскими компонентами без проблем.

Но теперь для поля ввода подтверждения пароля я не могу заставить его работать должным образом.

У меня есть пользовательские компоненты для полей ввода, например, <base-input-field>.

Если я добавлю атрибут ref="password" в свой пользовательский компонент (<base-input-field ref="password">), он будет ссылаться не на <input> внутри моего пользовательского компонента, а на оболочку <div>, которая инкапсулирует компонент <input> html.

Пример кода: 

            <!-- Password -->
            <div class="row">
              <base-text-field
                ref="password"
                name="password"
                type="password"
                :error="isVisible && errors.first('password')"
                v-validate="{
                  required: true,
                  min: 6,
                  max: 30,
                }"
                v-model.trim="password"
                required
              />
            </div>

            <!-- Confirm Password -->
            <div class="row">
              <base-text-field
                name="password_conf"
                type="password"
                :error="isVisible && errors.first('password_conf')"
                v-validate="{
                  required: true,
                  confirmed: 'password',
                }"
                :data-vv-as="password"
                v-model.trim="password_conf"
                required
              />
            </div>

Ответы [ 3 ]

1 голос
/ 29 мая 2019

Можете ли вы проверить, какие события поддерживаются в вашем пользовательском компоненте (может быть @ input / @ change)?

Если какое-либо из событий запускается при изменении вашего ввода, есть опция data-vv-validate-on в v-validate, где вы можете указать, по какому событию вы хотите проверить проверку. Подробнее здесь 

<base-text-field
            ref="password"
            name="password"
            type="password"
            :error="isVisible && errors.first('password')"
            v-validate="{
              required: true,
              min: 6,
              max: 30,
            }"
            v-model.trim="password"
            data-vv-validate-on="change"
            required
          />
1 голос
/ 30 мая 2019

Следуйте требованиям на этой странице и с вами все будет в порядке:

  • emit input событие, когда значение в вашем компоненте изменяется
  • имеют name и value, определенные в компоненте через $ _ veeValidate . Или используйте data-vv-name и data-vv-value-path (подробности здесь ).

Поскольку вы не предоставили код в base-text-field, я не могу дать вам еще один пример того, как он должен работать для вас.

1 голос
/ 29 мая 2019

Я не знаю vee-validate, но вот идея аналогичной проблемы, с которой я столкнулся, когда пользовательские компоненты не имели прямого доступа к <input>:

Получите ссылку на вход с помощью JS:

this.$refs.password.$el.querySelector("input")

Вы можете сохранить его в переменной и передать его компоненту, я полагаю.Опять же, я не знаю vee-validate.Надеюсь, это даст вам некоторые идеи.

...