I am trying to Validate an input in Vue 3 using Vee Validate Library. The Validation works as expected. But when i try to edit the form, the inputs are not populated
Surprisingly the inputs are populated correctly when "v-bind="field"" is not used on the input(But this breaks the validation)
This is a link to the problem. The Input without v-bind gets populated with the model data but the input with v-bind does not populate the model data.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<v-form v-on:submit="onSubmit">
<label>Input With v-bind</label>
<v-field name="name" rules="required" v-slot="{field, errors}">
<input type="text" id="name" name="name" class="form-control" rows="6"
v-bind="field" v-model="defaultName"
/>
</v-field><br>
<error-message name="name"></error-message><br>
<label>Input Without v-bind</label>
<v-field name="name2" rules="required" v-slot="{field, errors}">
<input type="text" id="name2" name="name2" class="form-control" rows="6"
v-model="defaultName2"
/>
</v-field><br>
<error-message name="name2"></error-message><br>
<button type="submit">Submit</button>
</v-form>
</div>
<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vee-validate@next"></script>
<script src="https://unpkg.com/@vee-validate/rules@next"></script>
<script src="https://unpkg.com/@vee-validate/i18n@next"></script>
<script>
const { defineRule, Form, Field, ErrorMessage, configure } = VeeValidate
const { setLocale, loadLocaleFromURL, localize } = VeeValidateI18n
// import all the rules that come with vee-validate
Object.keys(VeeValidateRules.default).forEach(rule => {
defineRule(rule, VeeValidateRules[rule])
})
const app = Vue.createApp({
components: {
VForm: Form,
VField: Field,
ErrorMessage,
},
data() {
return {
defaultName:'Shadab',
defaultName2:'Momin'
}
},
methods: {
onSubmit(values) {
alert('Submitted')
}
}
}).mount('#app')
</script>
</body>
</html>
Expecting the input to get populated with model data even with v-bind(for validation purposes)
The Issue was resolved by adding the v-model attribute to v-field component.
changed:
<v-field name="name" rules="required" v-slot="{field, errors}">To:
<v-field name="name" v-model="defaultName" rules="required" v-slot="{field, errors}">