尽管没有错误,为什么v-bind:class不起作用?

时间:2019-08-05 09:01:01

标签: javascript vue.js vuejs2

我编写了一个日历,该日历显示JSON文件中的事件,并且我希望几天后显示的事件的背景为黄色。我尝试使用v-bind:class来执行此操作,但是代码不起作用。可能是什么错误?

Code of calendar on GitHub

enter image description here

    <template>
      <div class="all">
        <div class="overflow-div">
            <transition :name="nameOfClass" >
              <div :key="currentPage" class="fade_wrapper">
                <div v-for="(week, i) in getCalendar" class="d_day">
                <li v-for="day in week" class="li_day">
                <div class="day" 
                     v-bind:class="{ 'longEvent': longEvent(day) }" 
                     v-html="[].concat(day).join('<br>')"></div>
                  </li>
                </div>
              </div>
            </transition>
        </div>
      </div> 
    </template>

    <script>
      import json from './Calendar_data.json'
    export default {
      data(){
        return{
          currentPage: 0,
          year: '',
          eventsData: json
        }
      },
        longEvent(dayNumber){
          let arrOfEvents = this.eventsData.events;
          for(let z = 0; z < arrOfEvents.length; z++){
            let dataStartOfEvent = arrOfEvents[z].starts_at;
            let getStartDataOfEvent = new Date(dataStartOfEvent);
            let dataEndOfEvent = arrOfEvents[z].ends_at;
            let getEndDataOfEvent = new Date(dataEndOfEvent);
            if(getStartDataOfEvent.getDate() != getEndDataOfEvent.getDate()){
              if((dayNumber[0] >= getStartDataOfEvent.getDate() && dayNumber[0] <= getEndDataOfEvent.getDate()) &&
                this.year === getStartDataOfEvent.getFullYear() && 
                (this.currentPage >= getStartDataOfEvent.getMonth() && this.currentPage <= getEndDataOfEvent.getMonth()) ){
                return true;
              }
            }
          }
        },
      getYear(){
        this.year = this.date.getFullYear();
      },
    }
  <style>
     .longEvent{
       background-color: yellow;
     }
  </style>

0 个答案:

没有答案