Vee-validate: Cannot read property 'split' of null" found in .vue

[chenyinhuan]

Versions:

• VueJs: #.#.#
• Vee-Validate:

Description:

Error in directive validate bind hook: "TypeError: Cannot read property 'split' of null" found in .vue

Steps To Reproduce:

[d3radicated]

I'm guessing that your v-validate prop has a value of null. If you want to temporarily disable validation on a field, set its v-validate prop to an empty string.

<input v-model="test" v-validate="''" />

[logaretm]

I need a little more than that in order to help you. what does your template look like?

[nikolay-sv]

You have a mistake in a code by definition of name
_createClass(ListenerGenerator, [{
...
return this.binding.expression || this.el.name

this name (fieldName) use in this.vm.$validator.attach as name attach
and this.binding.expression for example it is equal 'required'

[prp632791853]

the same problem troubled me again.

[logaretm]

@prp632791853 Can you provide a small snippet that produces the issue? As simple as you can.

[kluplau]

I have the exact same error.

Installed the @next version, setup Vue to use VeeValidate and set the v-validate, from the linked example from the bottom of the docs.

<input type="email" v-model="userDetails.email" v-validate="userDetails.email" data-rules="required|email" placeholder="Email">

I also tried with the example from the doc:

<input v-validate="'required|email'" type="text" name="email">

Which gave the same error:

[Vue warn]: Error in directive validate bind hook: "TypeError: Cannot read property 'split' of null"

UPDATE:
I now tried with the example from here, with the same result.

[logaretm]

@Blueblau @next tag was deprecated a long time ago, a lot has changed since beta.14 so give it a try without any tags.

npm install vee-validate

[kluplau]

@logaretm I actually tried the normal version first, but got another error:

[Vue warn]: Error in mounted hook: "Error: [vee-validate]:

Again using the example from Hootlex, linked to above.

[logaretm]

Hootlex example is outdated, the usage changed multiple times since then sadly.

try this example instead:

<div class="column is-12">
    <label class="label" for="email">Email</label>
    <p :class="{ 'control': true }">
        <input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email">
        <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
    </p>
</div>

Note that data-rules and data-vv-rules has been deprecated, you define rules in the directive expression instead, sorry about that.

[kluplau]

Okay. Thanks.
You might wanna remove it from the docs then.

[blackcat20180000]

LOL,LOL,LOL,LOL