I am encountering a problem with my parent-child component setup. The issue arises when I pass a validation field as a prop from the parent to the child, but it doesn't update upon the first click of the submit button in the child component. To explain further, when the form is submitted in the child component, it checks the form validation using the checkValidation method in the parent component. Let's say the form validation was true when initially submitted, however, in the console, this.validation still shows false in the child component. It's only after clicking on submit again that this.validation returns true in the console. So, essentially, the this.validation value changes only on the second click of the submit button. I would greatly appreciate any assistance in resolving this issue.
Parent Component
<template>
<UserDetails
ref="user_details"
:validation="validation"
@checkValidation="checkValidation"
/>
</template>
<script>
import UserDetails from 'views/my_account/users/edit.vue';
export default {
components: {
UserDetails,
},
data: function () {
return {
validation: false
}
},
methods: {
checkValidation() {
var valid = false;
var that = this;
valid = this.$refs["user_details"].$refs.userForm.validate()
this.validation = valid
},
}
};
</script>
Child Component
<template>
<div>
<v-form :model='user' ref='userForm'>
<v-layout row wrap>
<v-flex xs12 md6 class="add-col-padding-right">
<v-text-field
label='User Name'
required
v-model='user.name'>
</v-text-field>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-btn @click.prevent='submit'>Save</v-btn>
</v-layout>
</v-form>
</div>
</template>
<script>
export default {
props: ['validation'],
data: function () {
return {
user: {
name: ''
}
};
},
methods: {
submit() {
this.$emit('checkValidation');
console.log(this.validation)
},
}
};
</script>