Vue.js点击事件如何展示对应对象数据？点击日期按钮显示当日课表问题

核心问题说明 #

• 点击事件未传递当前选中的日期标识，无法区分用户点击的是周几的按钮
• 原有布尔类型的schedule状态只能控制整体显示/隐藏，无法匹配对应日期的课表
• 课表区域的v-if="time"判断条件无效，没有和选中状态做关联

修改步骤 #

1. 调整data属性：将原有布尔类型的schedule替换为activeDay，用于存储当前选中的日期标识
2. 修改按钮点击事件：点击按钮时传递当前日期的name作为参数
3. 重写showSchedule方法：实现点击选中/取消选中对应日期的逻辑
4. 调整课表显示条件：仅当遍历的日期和当前选中的activeDay匹配时，才展示对应课表
5. 优化课表遍历逻辑：直接遍历day.schedule数组，避免硬编码4节课的限制

完整修改后代码 #

模板部分 #

<div id="app">
 <div v-for="day in days" :key="day.name" class="days">
  <button @click="showSchedule(day.name)"> {{day.name}} </button>
 </div>
 <div v-for="day in days" :key="day.name">
  <ul v-if="activeDay === day.name">
   <li v-for="(item, index) in day.schedule" :key="index">
    {{item.time}} {{item.subject}} ({{item.mode}})
   </li>
  </ul> 
 </div>
</div>

Vue实例部分 #

new Vue({
 el: '#app',
 data: {
  activeDay: '', // 存储当前选中的日期
  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(dayName) {
    // 如果点击的是已经选中的日期，则隐藏课表，否则切换为当前点击的日期
    this.activeDay = this.activeDay === dayName ? '' : dayName
  }
}
})

内容的提问来源于stack exchange，提问作者Abdulrahman Kasim