Doesn't work

[SephVelut]

This plugin does not work at all.

<template>

<el-form driver="vee" :model="values" :rules="rules" ref="values">
  <el-form-item :rules="rules.email" label="email">
    <el-input type="text" v-model="values.email" autocomplete="off"></el-input>
  </el-form-item>
</el-form>
</template>

<script>
  export default {
    props: ["type"],
    data() {
        return {
            values: {
                email: "",
            },
            rules: {
                email: 'required|email',
            },
            errors: {},
        }
    },
}
</script>

import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en'
import 'element-ui/lib/theme-chalk/index.css';
import VeeValidate from 'vee-validate';
import VeeElement from 'vee-element';

const validator = new VeeValidate.Validator({}, {});

Vue.use(ElementUI, { locale });
Vue.use(VeeElement, validator, true);
.........

Doesn't do anything. Doesn't show errors on page and no errors on console.

[davestewart]

Hi,

You forgot to add the prop attribute to the el-form-item but when I corrected this, I got errors.

Try the demo here:

• https://codesandbox.io/s/k76x3n95r

The Vee Validate plugin is itself in Beta, so it's possible something has changed recently.

There is another ticket which is directly related to version numbers, so I'll try to take a look at this later today.

[SephVelut]

So I tried with this, including the prop

<template>
<el-form driver="vee" :model="values" :rules="rules" ref="values">
  <el-form-item :rules="rules.date" label="date" prop="startDate">
    <el-input type="text" v-model="values.startDate" autocomplete="off"></el-input>
  </el-form-item>
</el-form>
</template>

<script>
  export default {
    data() {
        return {
            values: {
                startDate: "",
                endDate: "",
            },
            rules: {
                date: 'required',
            },
            errors: {},
        }
    },
  };
</script>

import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en'
import 'element-ui/lib/theme-chalk/index.css';

import VeeValidate from 'vee-validate';
import VeeElement from 'vee-element';

Vue.use(ElementUI, { locale });
Vue.use(VeeElement, VeeValidate.Validator, true);

But got this error [Vue warn]: Error in event handler for "el.form.change": "TypeError: validator.verify is not a function"

Great project btw, I appreciate this repo. But I think the demo directory just needs to be deleted and there needs to instead be a very simple quickstart. A basic, full code, nothing left out, but simple baseline to have like a single form input validate. Then users can get that working and from there add/tweak with no confusion about what stopped working when they did something more. The demo gets in the way because included is a bunch of other unnecessary code.

[davestewart]

Obviously with a demo, one wants to provide several scenarios, but it's a good suggestion.

I'll look to add that in when I get to the bottom of the error :)

[SephVelut]

That would be very helpful. Right now I can't figure out what is going on. I stripped my App down to just the simple form on the demo. Removed my package lock file and installed the same versions of vee validate and vee element as the demo. Now when i type text into the input the error message is Uncaught (in promise) Error: [vee-validate] No such validator 'required' exists.

<template>

  <el-form driver="vee" ref="form"
           :model="model"
           :rules="rules"
           label-width="120px"
  >
    <el-form-item label="Text" prop="text">
      <el-input v-model="model.text"/>
    </el-form-item>

  </el-form>
</template>

<script>
export default {
  data () {
    return {
      model: {
        text: '',
      },
      rules: {
        text: 'required|alpha|min:2|max:5'
      }
    }
  },
}
</script>

import '@babel/polyfill';

import Vue from 'vue';
import './plugins/vuetify';
import App from './App.vue';
import store from './store';

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VeeValidate from 'vee-validate';
import VeeElement from 'vee-element';

Vue.use(ElementUI);
Vue.use(VeeElement, new VeeValidate.Validator({}, {}), true);

Vue.config.productionTip = false;

new Vue({
  store,
  render: h => h(App),
}).$mount('#app');

I don't know what else to do to reproduce or simplify because the demo includes other patterns like extending the Form with a view and has a router in it and the config is extending the Validator and a bunch of other stuff. This is where a really simple quickstart would be very useful "Here is the template and here is the script you need to get one form input working".