My goal with this code is to display each day's class schedule when it is clicked on. However, the issue I'm facing is that the entire week's schedule is being displayed instead of just the selected day. What adjustments should I make in order to fix this error?
<div id="app">
<div v-for="day in days" :key="day.name" class="days">
<button @click="showSchedule(day)"> {{day.name}} </button>
</div>
<div v-if="displaySchedule">
<ul>
<li v-for="n in selectedDay.schedule">
{{n.time}} - {{n.subject}} ({{n.mode}})
</li>
</ul>
</div>
</div>
In this code snippet, the showSchedule method has been modified to receive a parameter representing the selected day and toggles the displaySchedule property accordingly.
new Vue({
el: '#app',
data: {
displaySchedule: false,
selectedDay: {},
days: [
{
name: "Mon",
date: "10",
lessons: "4 lessons",
grade: "Grade 9",
schedule: [
{
time: "9:00",
subject: "Biology",
mode: "Lecture"
},
{
time: "10:00",
subject: "Chemisty",
mode: "Tutorial"
},
{
time: "11:00",
subject: "Physics",
mode: "Test"
},
{
time: "13:00",
subject: "Biology",
mode: "Lecture"
}
]
},
{
name: "Tue",
date: "11",
lessons: "3 lessons",
grade: "Grade 9 ",
schedule: [
{
time: "9:00",
subject: "Biology",
mode: "Lecture"
},
{
time: "10:00",
subject: "Chemisty",
mode: "Tutorial"
},
{
time: "11:00",
subject: "Physics",
mode: "Test"
},
{
time: "13:00",
subject: "Biology",
mode: "Lecture"
}
]
},
{
name: "Wed",
date: "12",
lessons: "5 lessons",
grade: "Grade 8 ",
schedule: [
{
time: "9:00",
subject: "Biology",
mode: "Lecture"
},
{
time: "10:00",
subject: "Chemisty",
mode: "Tutorial"
},
{
time: "11:00",
subject: "Physics",
mode: "Test"
},
{
time: "13:00",
subject: "Biology",
mode: "Lecture"
}
]
},
],
},
methods: {
showSchedule(day) {
this.selectedDay = day;
this.displaySchedule = true;
}
}
})