What I am trying to achieve with this code is to display each days class schedule when clicked on. So for example when "Monday" button is clicked, Monday's schedule will be displayed. In my code the entire weeks schedule will be displayed. How can I fix this?
<div id="app">
<div v-for="day in days" :key="day.name" class="days">
<button @click="showSchedule"> {{day.name}} </button>
</div>
<div v-for="day in days" :key="day.name">
<ul v-if="time">
<li v-for="n in 4">
{{day.schedule[n].time}}
</li>
</ul>
</div>
</div>
Here the showSchedule method toggles the schedule data property so that schedules are displayed conditionally.
new Vue({
el: '#app',
data: {
schedule: false,
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() {
this.schedule = !this.schedule;
}
}
})
CodePudding user response：
I removed your second loop and added a new property to each day. This property 'show' is a boolean that is used in a v-if to render the schedule of that day.
new Vue({
el: '#app',
data: {
schedule: false,
days: [
{
name: "Mon",
date: "10",
lessons: "4 lessons",
grade: "Grade 9",
show: false,
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 ",
show: false,
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 ",
show: false,
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"
}
]
},
],
}
})<div id="app">
<div v-for="day in days" :key="day.name" class="days">
<button @click="day.show = !day.show"> {{day.name}} </button>
<div v-if="day.show"> {{ day.schedule }} </div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>