Problems with value attribute set on input

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.

[chiragparekh]

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

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

[daylightstudio]

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