Vee-validate: [Query] How to get Vue-material and Vee-validate to play nice together?

[mubaidr]

Versions:

• VueJs: 2.1.0
• Vee-Validate:2.0.0-beta.18

Description:

Vue-material and Vee-validate does not work good together, error collection does not contain name of the input.

Steps To Reproduce:

Use vee-validate on md-input tag.

For source code/Example please check this:
https://github.com/mubaidr/SPA-asp.net-api-vuejs-/blob/master/MBO/client/components/Account/Signup.vue

[logaretm]

Not really sure, here is a small fiddle which have both working fine as far as I can tell, so I think its not a compatibility issue.

https://jsfiddle.net/1ux1eh51/1/

If you can create a fiddle to show the problem that would be great since I can't replicate your code into the fiddle easily.

[mubaidr]

Sure, here is the updated jsfiddle:
https://jsfiddle.net/epzrvuc1/

I have included both normal input tags and md-input tags (provided by vue-material), please note the resulting errors object does not contain filedname for md-input but the native input type works fine.

[spezzino]

The only difference I see is that in the working example, no md-input component is present. The regular input tag is included inside a md-input-container.
The md-input component must conform to this spec: http://vee-validate.logaretm.com/examples#component-example

Edit: maybe the name prop is missing?

[mubaidr]

@spezzino Yes, the problem occurs only when md-input tag is used.
I don't understand what you mean by

maybe the name prop is missing?

[spezzino]

I mean, In the component's source

`

`

there is no name property
Source: md-input

[spezzino]

Solution I've found:
add data-vv-name to your md-input component

Example: https://jsfiddle.net/epzrvuc1/2/

[mubaidr]

@spezzino Awesome, thank you so much!