Vee-validate: Problems with value attribute set on input

[daylightstudio]

Versions:

• VueJs: v2.1.8
• Vee-Validate: 2.0.0-beta.18

Description:

I have a text input field that I'd like to set the "value" attribute on without using a Vue data model. Essentially am wanting PHP to do the HTML rendering of the input and Vue/Vee to do the JS validation. If no value attribute is set, it works fine. If a value attribute is set, then it will not allow any editing of the field (well, it simply changes back to the originally inputted value quickly... you can test with debounce to see that happen)

Steps To Reproduce:

Here is code to reproduce the issue (just note the value="My Value" attribute):

HTML:

<div id="form">
    <label class="label" for="email">Email</label>
    <p :class="{ 'control': true }">
        <input value="My Value" v-validate data-vv-rules="required|email" data-vv-name="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>

Javascript:

<script type="text/javascript">
Vue.use(VeeValidate, { delay: 500});
new Vue({
    'el': '#form'
})
</script>

I feel like I'm missing something here easy and haven't been able to find it yet. Thanks.

[dmitry-litviak]

@daylightstudio Have the same issue. Got it, when updated from 2.0.0-beta.14 to 2.0.0-beta.18 and vue.js v2.0.3 to v2.1.8 Previously everything works fine

[logaretm]

That is weird, it seems to only happen with Vue.js 2.1.7 and 2.1.8

You can use version 2.1.6 until I figure out if it is related to the plugin or Vue.

here is your example with 2.1.6: https://jsfiddle.net/g0xjq2nk/
and with 2.1.8: https://jsfiddle.net/g0xjq2nk/1/

Note that both use the [email protected]

@dmitry-litviak it probably worked because of the vue version, as beta.18 didn't change how validation happens, it just introduced some refactoring compared to version beta.14

any help will be appreciated.

[logaretm]

Okay I looked around and fiddled some more, it seems to be a bug in Vue, I think it is the same as this one: https://github.com/vuejs/vue/issues/4705

For reference here is fiddle without vee-validate that attempts the validate the input:

Vue 2.1.6
https://jsfiddle.net/jhr1qvuL/2/

Vue 2.1.8
https://jsfiddle.net/jhr1qvuL/1/

Note how wonky the input behavior in 2.1.8

It seems to be fixed and going to be released soon, I will close this issue once fixed.

[daylightstudio]

Thanks for checking in on this and providing an update @logaretm... much appreciated and great work on this plugin.

[logaretm]

Seems fixed now with Vue 2.1.9

https://jsfiddle.net/g0xjq2nk/2/

[chiragparekh]

Have same issue with Vue 2.2.0. It happens when I use v-bind:value=""

https://jsfiddle.net/g0xjq2nk/10/

[logaretm]

@chiragparekh I will investigate the issue, thanks for the feedback.

[logaretm]

@chiragparekh I have tried a makeshift validator and the same issue occurs, I will try to research a solution. so you might want to find another way to bind the value, maybe render it with PHP if you are using it without binding.

https://jsfiddle.net/logaretm/g0xjq2nk/11/

[chiragparekh]

Okay thanks for considering issue. Btw library is awesome. :+1: