Passing value to Child Component is updating only once-CodePudding

In my Vue application, I have a list of months in my parent component like this-

When clicking on any month, I would like to pass its id to the child component named timeComponent. Below is the code.

Parent Component-

<template>
    <div  id="prayer_time">        
        <div >
            <div >
                <div >
                    <ul >
                        <li  v-for="(month, index) in months" :key="index">
                            <a  v-on:click="monthId(index   1)">
                                {{ month }}
                            </a>
                        </li>
                    </ul>
                </div><!-- /.card-header -->
            </div>
            <!-- /.card -->
        </div>
        <div v-if="prayertimeshow">
            <timeComponent :month_id=month_id :mosque_id=this.mosque_id />        
        </div>
    </div>
</template>

<script>
    import timeComponent from './TimeComponent.vue';
    export default {
        props: ['mosque_id'],
        components: {
            timeComponent
        },
        data(){
            return {
                month_id: '',
                prayertimeshow: '',
                months : ['January', 'February', 'March','April','May','June','July','August','September','October','November','December']
            }
        },
        methods:{
            monthId(event) { 
                this.month_id = event; 
                this.prayertimeshow = true;   
            }
        }
    }
</script>

The problem is that when I click on any month for the first time, the month_id value is passed to the child component perfectly. But it is not working when I click on another month for the second time.

In the child component, I am accessing the prop value like this-

<script>     
       export default {         
            props: ['month_id'],         
            created: function () {
              console.log(this.month_id);  
            }    
       }
 
</script>

Is it the correct way to do this?

CodePudding user response：

The issue is that created hook runs only once when the child component has been created. The better approach to check the updated prop value in the child is to use a watch hook.

You can check the update in month_id like this-

Child Component-

<template>
  <div>{{ month_id }}</div>
</template>

<script>
export default {
  props: ["month_id"],

  watch: {
    month_id(newVal, oldVal) {
      // newVal = updated month_id
      this.getTime(newVal);
    },
  },

  methods: {
    getTime(input) {
      console.log(input);
    },
  },
};
</script>

CodePudding user response：

Sometimes Vue's reactivity system isn't enough, you have to re-render a component manually. There are many ways to do that but I usually come up with these 2:

First: Key-changing technique

Assign a key to your component:

<timeComponent :month_id=month_id :mosque_id=this.mosque_id :key="timeComponentKey"/>

Increase key value to let Vue know the component is updated

data()
{
    return {
                .....
                timeComponentKey: 0,
           },
}
methods:
{
    monthId(event) 
    { 
        ...
        this.timeComponentKey  ; 
    }
}

Second: Calling forceUpdate()

methods:
{
    monthId(event) 
    { 
        ...
        this.$forceUpdate(); 
    }
}