Veevalidate总是返回真正的Vuejs

Question

我使用这种方式使用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组件来订阅电子邮件。问题是当我使用$ validator.validateAll（）时，这个表单总是给出

我不清楚Vee-validate的功能吗？

这是我的组件newsletter.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!');
            });
          }
      }




});

Answer 1

为了添加vee-validate的验证，您需要将其作为值添加到v-validate选项，而不是直接在标记内添加。

有关更多信息，请查看required example on docs

更新代码中的以下行。

<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>