Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

afoysal's avatar

Default value for props of Child Component

I have a child component like below.

<script>
    export default {
        props: ['mosque_id','month_id'],
        data(){
            return {
                prayer_times: [],
            }
        },
        watch: {
            month_id() {
                this.getPrayerTime();
            }
        },
        methods:{
            getPrayerTime: function () {
                axios.get('/api/v1/getPrayerTime/'+ this.mosque_id+'/'+ this.month_id)
                .then(function (response) {
                    this.prayer_times = response.data;
                }.bind(this));
            }
        }
    }
</script>

I would like to set Default value for month_id to work on component first load time. Later it will update by parent component.

0 likes
9 replies
afoysal's avatar

@vincent15000 Thanks. I would like to set a value of mosque_id when the component loads (when props is absent). Could you please help me in this regard ?

1 like
jaseofspades88's avatar

@afoysal will this default value you wish to set always be the same or do you want it to be dynamic?

2 likes
vincent15000's avatar

@afoysal

export default {
    props: {
		month_id: {
			type: Number,
			default: defaultValue, // here replace defaultValue with your default value
			...
		}
	},
}
1 like
afoysal's avatar

@vincent15000 Thanks. Is this default value will update by parent component later ? Can I use it at the time of loading of the component ? Thanks.

1 like
vincent15000's avatar

@afoysal When you define a default value, this value will be used only if you don't props value is undefined, for example when you don't pass the props value from the parent or when you pass a null or undefined props value from the parent.

Please or to participate in this conversation.