如何在 vuejs 中的 @click 处显示每个对象数据？

Question

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;
     }
}

 })

Answer 1

 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>