kazupon / vue-validator

:white_check_mark: Validator component for Vue.js
MIT License
2.19k stars 431 forks source link

bug: vm.$options, can not find asserts #188

Closed sandwich99 closed 8 years ago

sandwich99 commented 8 years ago

请修复BUG, 或者在 readme 中注明

谢谢

kazupon commented 8 years ago

Sorry, I cannot understand chinese... Can you use the english please?

sandwich99 commented 8 years ago

When use vue-validator work with vue-router, vue-router has to been loaded after vue-validator, otherwise will report error.

I am not sure if there is the bug of vue or vue-validator, if not, please note in readme, vue-validator and vue-router have loading order dependency

kazupon commented 8 years ago

Thank you for your feedback 😺

When use vue-validator work with vue-router, vue-router has to been loaded after vue-validator, otherwise will report error.

Can you provide the reproduction codes with jsfiddle (or other) please?

sandwich99 commented 8 years ago

It's hard to reproduction in jsbin

cause in browser env, router and validator will be auto installed.


Vue.use(VueValidator)
Vue.use(CustomValidatorsPlugin)
Vue.use(Router)

//初始化router
const router = new Router({history: false })
setupRoute(router) //success
Vue.use(Router)
Vue.use(VueValidator)
Vue.use(CustomValidatorsPlugin)

//初始化router
const router = new Router({history: false })
setupRoute(router) //success

Vue.use(Router)
//初始化router
const router = new Router({history: false })
setupRoute(router)

Vue.use(VueValidator) //error

image

kazupon commented 8 years ago

Thank you for your great reporting!!

Hmm, In my environment (commonjs), I could not confirm this issue...

kazupon commented 8 years ago

Related https://github.com/kazupon/vue-i18n/issues/28

sqal commented 8 years ago

When use vue-validator work with vue-router, vue-router has to been loaded after vue-validator, otherwise will report error.

Actually i found that importing router instance from one file and installing vue-validator in another is causing error for me: Here's my setup:

index.js - entry point

import Vue from 'vue';
import VueValidator from 'vue-validator';
Vue.use(VueValidator);

Vue.config.debug = true

import router from './router';
...

router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';

Vue.use(VueRouter);

const router = new VueRouter({
  hashbang: false,
  history: true,
});

router.map(routes);

export default router;

And with this setup i am getting error - Uncaught TypeError: Cannot read property 'minlength' of undefined

(whole console log http://prntscr.com/axiijm)

even if try to use vue-validator after router import (in any place inside index.js really). But when i move vue-validator to router.js, everything works as expected

import Vue from 'vue';
import VueValidator from 'vue-validator';
import VueRouter from 'vue-router';
import routes from './routes';

Vue.use(VueValidator);
Vue.use(VueRouter);

const router = new VueRouter({
  hashbang: false,
  history: true,
});

router.map(routes);

export default router;

Any idea why is this happening?

kazupon commented 8 years ago

In my enviroment, I reproduced this issue.

This issue occured when execute router#start method in advance of installation with Vue.use when we use vue-router plugin. We must install with Vue.use in advance of router#start.

sqal commented 8 years ago

Hi @kazupon I updated vue-validator to 2.1.0 and.. previous minlength bug is gone but unfortunately, I am still having some issues with vue-validator & vue-router working together, check this example: http://www.webpackbin.com/E1sjGml-W

Console throws error when you try to open foo route:

Uncaught TypeError: Cannot read property 'required' of undefined

But when you install vue-validator inside router.js then error is gone. What is going on here?

The docs says now:

if you are using vue-router, you must install with Vue.use() in advance of router#start.

but i start my app router.start() after vue-validator installation, or perhaps I don't understand it properly?

kazupon commented 8 years ago

I checked your reproduction codes.

import router from './router'

router#map had been run inside router.js in advance of vue-validator installing. I have found that the component is evaluated with vue-router when I confirmed it.

We must install it with Vue.use in advance of initializing vue-router.

sqal commented 8 years ago

All right. Understood. Thank you.

kazupon commented 8 years ago

@sqal If you could resolve this issue, please tell me. I'll try to update the documentation. 😺