Veevalidate всегда возвращать истинный Vuejs - PullRequest
Новая
       9

Veevalidate всегда возвращать истинный Vuejs

0 голосов
/ 15 марта 2019

Я использую webpack и экземпляр VeeValidate следующим образом: 

import VeeValidate from 'vee-validate';
Vue.use(VeeValidate, {
    // This is the default
    inject: true,
    // Important to name this something other than 'fields'
    fieldsBagName: 'veeFields'
});

У меня есть компонент vuejs, созданный для пользователя, чтобы подписаться на электронную почту.Проблема в том, что эта форма всегда дает true, когда я использую $ validator.validateAll ()

Я плохо понял, как работает Vee-validate?

Это код моего компонента n ewsletter.vue.js 

Vue.component('newsletter', {

    template :  '<div>\
    <b-form inline>\
      <b-input v-validate required  id="email" name="email" class="mb-2 mr-sm-2 mb-sm-0"  placeholder="Deja tu email" type="email" :state="validate_input" />\
  \
      <b-button variant="primary-degree" @click="validateBeforeSubmit">Enviar</b-button>\
    </b-form>\
  </div>',

    props : ['route_post'],
        inject: ['$validator'],
    data() {
        return {
         email: '',
        }
      },
      computed: {
            validate_input: function() {
                return this.errors.has("email")
            }
      },
      methods: {
        onSubmit() {
          // Form submit logic
        },
        validateBeforeSubmit() {
            this.$validator.validateAll().then((result) => {
                console.log(result);
              if (result) {
                // eslint-disable-next-line
                alert('Form Submitted!');
                return;
              }

              alert('Correct them errors!');
            });
          }
      }




});

1 Ответ

1 голос
/ 15 марта 2019

Чтобы добавить валидацию vee-validate, вам нужно добавить ее как значение для опции v-validate, а не непосредственно в теге.

Для получения дополнительной информации проверьте обязательный пример на документах

Обновите строку ниже в вашем коде. 

<b-input v-validate="'required'"  id="email" name="email" class="mb-2 mr-sm-2 mb-sm-0"  placeholder="Deja tu email" type="email" :state="validate_input" />

Если вы также хотите отобразить ошибку, вы можете добавить строку ниже как => 

 <span class="error" v-if="errors.has('email')">{{ errors.first('email') }}</span>
...