Vee-validate не может проверить пароль совпадения

Я безуспешно пытаюсь проверить match password ... Я ошибаюсь? Проверка email и password в порядке, но не match_password

используя VeeValidate

HTML

<div id = "app">
  <v-app id = "inspire">
    <v-container mt-1 grid-list-xl">
      <v-layout row wrap justify-space-around>
        <v-flex d-flex sm6 md6>
          <v-layout row wrap>
            <v-flex d-flex>
              <v-card class = "flexcard" dark tile flat>
                <v-card-title class = "card__title justify-center">PROFILE</v-card-title>
                <form @submit.prevent = "onSubmit()">
                 <v-card-text class = "card__text grow">

                  <v-text-field 
                      label = "Email" 
                      v-model = "email" 
                      data-vv-name = "email" 
                      v-validate = "'required|email'" 
                      :error-messages = "errors.collect('email')" 
                      prepend-icon = "email"
                  ></v-text-field>

                  <v-text-field 
                      type = "password" 
                      v-model = "password" 
                      label = "Password" 
                      v-validate = "'required|min:6'"  
                      data-vv-name = "password" 
                      :error-messages = "errors.collect('password')" 
                      prepend-icon = "lock"
                  ></v-text-field>  

                  <v-text-field 
                      type = "password" 
                      v-model = "match_password" 
                      label = "Match Password" 
                      v-validate = "'required|confirmed:password'" 
                      :error-messages = "errors.collect('match_password')"
                      data-vv-as = "password"
                      data-vv-name = "match_password" 
                      prepend-icon = "lock"
                   ></v-text-field>

                </v-card-text>
                <v-card-actions>
                <v-btn round  type = "submit">SUBMIT</v-btn>
                </v-card-action>
                </form>
              </v-card>
            </v-flex>
          </v-layout>
        </v-flex>
     </v-layout>
      </v-container>
  </v-app>
</div>

Сценарий

Vue.use(VeeValidate, {
  errorBagName: 'errors'
})

new Vue({
  el: '#app',
  $_veeValidate: { validator: 'new' },
  data: () => ({
    email: '',
    password: '',
    match_password: ''
  }),
  computed: {
  },
  methods: {
    onSubmit () {
     console.info('SUBMIT')
    },
    cancel () {
    }
  }
})

Потому что match-password отсутствует в шаблоне.

IVO GELOV 23.07.2018 10:31

Нет, это было спрятано далеко справа.

gil 23.07.2018 11:09

Возможный дубликат Vue js vee проверять подтверждение пароля всегда ложно

Ryley 23.07.2018 14:51

следующая ссылка решит проблему https://logaretm.github.io/vee-validate/advanced/cross-‌​field-validation.htm‌​l#targeting-other-fi‌​elds

Mohamed Raza 19.01.2021 15:36
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
4
2 208
1

Ответы 1

Нашел ответ в Vue js vee проверять подтверждение пароля всегда ложно

tarfet 'пароль' должен иметь ref = "password"

вот обновленный html-код

<div id = "app">
  <v-app id = "inspire">
    <v-container mt-1 grid-list-xl">
      <v-layout row wrap justify-space-around>
        <v-flex d-flex sm6 md6>
          <v-layout row wrap>
            <v-flex d-flex>
              <v-card class = "flexcard" dark tile flat>
                <v-card-title class = "card__title justify-center">PROFILE</v-card-title>
                <form @submit.prevent = "onSubmit()">
                <v-card-text class = "card__text grow">
                  <v-text-field label = "Email" v-model = "email" data-vv-name = "email" 
                     v-validate = "'required|email'" :error-messages = "errors.collect('email')" prepend-icon = "email"></v-text-field>
                 <v-text-field type = "password" v-model = "password" label = "Password" v-validate = "'required|min:6'"  data-vv-name = "password" :error-messages = "errors.collect('password')" ref = "password" prepend-icon = "lock"></v-text-field>
                 <v-text-field type = "password" v-model = "match_password" label = "Match Password" v-validate = "'required|confirmed:password'" :error-messages = "errors.collect('match_password')"data-vv-as = "password"data-vv-name = "match_password" prepend-icon = "lock"></v-text-field>
                </v-card-text>
                <v-card-actions>
                <v-btn round  type = "submit">SUBMIT</v-btn>
                </v-card-action>
                </form>
              </v-card>
            </v-flex>
          </v-layout>
        </v-flex>
     </v-layout>
      </v-container>
  </v-app>

Другие вопросы по теме