Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I have a month list like below in my VueJS application.
I would like to show time table of clicked month below of the month names when clicked. In this regard I can fetch ID of the month name when clicked first time. But later if I click on another month name it is not working. My month name code is like below.
<template>
<div class="content container-fluid" id="prayer_time">
<div class="col-md-12">
<div class="card">
<div class="card-header p-2">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" v-on:click="monthId($event)" id="1">
January
</a>
</li>
<li class="nav-item">
<a class="nav-link" v-on:click="monthId($event)" id="2">
February
</a>
</li>
<li class="nav-item">
<a class="nav-link" v-on:click="monthId($event)" id="3">
March
</a>
</li>
<li class="nav-item">
<a class="nav-link" v-on:click="monthId($event)" id="4">
April
</a>
</li>
<li class="nav-item">
<a class="nav-link" v-on:click="monthId($event)" id="5">
May
</a>
</li>
<li class="nav-item">
<a class="nav-link" v-on:click="monthId($event)" id="6">
June
</a>
</li>
<li class="nav-item">
<a class="nav-link" v-on:click="monthId($event)" id="7">
July
</a>
</li>
<li class="nav-item">
<a class="nav-link" v-on:click="monthId($event)" id="8">
August
</a>
</li>
<li class="nav-item">
<a class="nav-link" v-on:click="monthId($event)" id="9">
September
</a>
</li>
<li class="nav-item">
<a class="nav-link" v-on:click="monthId($event)" id="10">
October
</a>
</li>
<li class="nav-item">
<a class="nav-link" v-on:click="monthId($event)" id="11">
November
</a>
</li>
<li class="nav-item">
<a class="nav-link" v-on:click="monthId($event)" id="12">
December
</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:''
}
},
methods:{
monthId(event) {
this.month_id = event.currentTarget.id;
this.prayertimeshow = true;
}
}
}
</script>
How can I fetch month ID again and again when click on another month name ?
Why don't you directly pass the month id inside the method ?
<li class="nav-item">
<a class="nav-link" v-on:click="monthId(1)">
January
</a>
</li>
I would probably write this another way.
const months = ['January', 'February', ...];
And then in the template.
<li class="nav-item" v-for="({ month }, index) in months" :key="'month-'+index">
<a class="nav-link" v-on:click="monthId(index + 1)">
{{ month }}
</a>
</li>
@vincent15000 Thanks. I am passing this month name to child component. I would like to catch the month name value in child component. Thanks.
@afoysal pass it through as a prop
@Ben Taylor Thanks. I passed as props in this way. <div v-if="prayertimeshow"> <timeComponent :month_id=month_id :mosque_id=this.mosque_id /> </div>. You can check in my post. But it is not working. This is working for first time. But not working if I click on another month name second time. Thanks.
some advice: place the month names into an array use v-for to show them, that could save a lot of lines of code
var months = [
{ id: 1, name: 'January' },
{ id: 2, name: 'Feburary' },
......
]
then you can use it as a object in child component
@MaverickChan Thanks. I passed as props in this way. <div v-if="prayertimeshow"> <timeComponent :month_id=month_id :mosque_id=this.mosque_id /> </div>. You can check in my post. But it is not working. This is working for first time. But not working if I click on another month name second time. Thanks.
@afoysal
you don't have to use this in the template
remove it.
And, follow the convention , component name should be
<time-component :month-id="month.id" />
I must say , your code is not clear. just follow my lead.
<li v-for="month in months">
<div class="nav-link" @click="monthId(month.id)">
{{ month.name }}
</div>
</li>
@afoysal i rewrote your code.
<template>
<div class="content container-fluid" id="prayer_time">
<div class="col-md-12">
<div class="card">
<div class="card-header p-2">
<ul>
<li v-for="month in months" :key="month.id">
<div @click="selectMonth(month)">
{{ month.name }}
</div>
</li>
</ul>
</div>
</div>
</div>
<div v-if="prayertimeshow">
<time-component :month-id="currentMonth.id" :mosque-id="mosque_id" />
</div>
</div>
</template>
<script>
import timeComponent from './TimeComponent.vue';
export default {
props: ['mosque_id'],
components: {
timeComponent
},
data(){
return {
months: [
{ id: 1, name: 'Jan' },
{ id: 2, name: 'Feb' },
{ id: 3, name: 'Mar' },
{ id: 4, name: 'Apr' },
{ id: 5, name: 'May' },
{ id: 6, name: 'Jun' },
{ id: 7, name: 'Jul' },
{ id: 8, name: 'Aug' },
{ id: 9, name: 'Sep' },
{ id: 10, name: 'Oct' },
{ id: 11, name: 'Nov' },
{ id: 12, name: 'Dec' },
],
currentMonth: {},
prayertimeshow: false
}
},
methods:{
selectMonth(month) {
this.currentMonth = month
this.prayertimeshow = true
},
}
}
</script>
Please or to participate in this conversation.