javascript - props value not sending the updated value from parent to child component in vue

Question

I have a parent child component. The issue I am facing here is that validation field which I am sending as a prop from parent to child doesn't get updated the first time I click on submit button in child component. For example, when I submit the form on 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 it was submitted but in the console this.validation still shows false in the child component and when I click on submit again, then in the console this.validation return true. So the this.validation value changes the second time on clicking the submit button. Please help me solve 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>

question from:https://stackoverflow.com/questions/65853984/props-value-not-sending-the-updated-value-from-parent-to-child-component-in-vue

Answer 1

This should do the trick

//child component
  submit() {
  this.$emit('checkValidation');
  this.$nextTick(()=>{console.log(this.validation)})
},

for further details I recommend the following article documention

the article should answer most of your doubts??