如何在vuejs的@click處顯示每個物件的資料？

我試圖用這段代碼實作的是在點擊時顯示每天的課程表。例如，當單擊“星期一”按鈕時，將顯示星期一的日程安排。在我的代碼中，將顯示整個星期的日程安排。我怎樣才能解決這個問題？

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

這里的 showSchedule 方法切換日程資料屬性，以便有條件地顯示日程。

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

 })

uj5u.com熱心網友回復：

我洗掉了您的第二個回圈并每天添加一個新屬性。此屬性“show”是一個布林值，用于 v-if 以呈現當天的日程安排。

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>

標籤：javascript Vue.js

上一篇：Vue3應用程式錯誤：為什么在發生任何單擊事件之前執行此方法？

下一篇：注銷不作業Codeigniter會話沒有被取消