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

时，此表单始终为true

我对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!');
            });
          }
      }




});

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>

Veevalidate始终返回true Vuejs

1 个答案: