Почему у меня данные не меняются?

У меня такая проблема возникла, что класс или переменная this.selected должен меняться и в data все меняется, но вот почему-то в template пишет что там постоянный false. Кто может подсказать в чем дело. https://pyvjxxnnvj.codesandbox.io/#/
Сам код большой можно в песочнице https://codesandbox.io/s/pyvjxxnnvj
но вот
пример
<template>
  <div class="calendar">
    <div class="calendar-header bold">
      <i class="material-icons" @click="prevMonth">keyboard_arrow_left</i>
      {{ getFullMonth }}
      <i class="material-icons" @click="nextMonth">keyboard_arrow_right</i>
    </div>
    <div class="calendar-body">
      <div class="week bold">
        <div class="dayOfWeek">ПН</div>
        <div class="dayOfWeek">ВТ</div>
        <div class="dayOfWeek">СР</div>
        <div class="dayOfWeek">ЧТ</div>
        <div class="dayOfWeek">ПТ</div>
        <div class="dayOfWeek">СБ</div>
        <div class="dayOfWeek">ВС</div>
      </div>
      <div class="week" v-for="date in getDate">
        <div
          v-for="item in date"
          :ref="`${year}-${month}-${item.date}`"
          :class="{ 'week-day': true, 'active-day': selected[item.date] }"
          @click="onSelect(item.date);"
        >
          {{ selected[item.date] }}
          <span :class="{ active: item.today }">{{ item.date }}</span>
          <div v-for="shedule in item.shedule" class="week-day_time">
            {{ shedule }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import calendarDate from "../class/calendar";
import moment from "moment";
import dateCalendar from "../data/date_calendar.json";
import axios from "axios";

export default {
  name: "full-calendar",
  data() {
    return {
      year: null,
      month: null,
      shedules: [],
      selected: []
    };
  },
  computed: {
    getFullMonth() {
      let date = dateCalendar.month[this.month];
      return `${date} ${this.year} г.`;
    },
    getDate() {
      let dataCalendar = new calendarDate(
        this.year,
        this.month
      ).getCalendarWeek();
      let dateMonthCalendar = null;
      let arrRes = [];
      for (let i = 0; i < this.shedules.length; i++) {
        let shedule = this.shedules[i];
        let dateStart = moment(shedule.start);
        let dateEnd = moment(shedule.end);
        if (dateStart.month() === this.month) {
          for (let n = 0; n < dataCalendar.length; n++) {
            for (let key in dataCalendar[n]) {
              arrRes[dateStart.date()] = arrRes[dateStart.date()] || [];
              if (dataCalendar[n][key].date === parseInt(dateStart.date())) {
                dateMonthCalendar = dataCalendar[n][key];
                arrRes[dateStart.date()].push(
                  `${dateStart.format("HH:mm")}-${dateEnd.format("HH-mm")}`
                );
              }
            }
          }
          dateMonthCalendar.shedule = arrRes[dateStart.date()];
        }
      }
      return dataCalendar;
    }
  },
  methods: {
    nextMonth() {
      let month = `${this.year}-${this.month + 1}`;
      let next = moment(month, "YYYY-MM").add(1, "month");
      this.month = next.month();
      this.year = next.year();
    },
    prevMonth() {
      let month = `${this.year}-${this.month + 1}`;
      let next = moment(month, "YYYY-MM").add(-1, "month");
      this.month = next.month();
      this.year = next.year();
    },
    onSelect(day) {
      console.log(this.selected);
      this.selected[day] = !this.selected[day];
    }
  },
  created() {
    let date = moment();
    this.year = date.year();
    this.month = date.month();
    for (
      let i = 1;
      i < moment(`${this.year}-${this.month + 1}`, "YYYY-MM").daysInMonth() + 1;
      i++
    ) {
      this.selected[i] = false;
    }
    axios.get("../data/data_shift.json").then(res => {
      this.shedules = res.data;
    });
  }
};
</script>

<style lang="scss">
.calendar {
  .calendar-header {
    display: flex;
    align-items: center;
  }
  .calendar-body {
    display: flex;
    flex-direction: column;
    .week {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      .dayOfWeek {
        text-align: center;
        height: 35px;
        line-height: 35px;
      }
      div {
        display: inline-block;
        text-align: right;
        width: 14%;
        border: 1px solid #e6e6e6;
        height: 100px;
        span {
          padding-right: 5px;
        }
      }
    }
  }
}
</style>

  • Вопрос задан
  • 161 просмотр
Пригласить эксперта
Ответы на вопрос 1
bingo347
@bingo347
Crazy on performance...
Во-первых, selected у Вас явно объект, а не массив, поэтому в data меняем строку
selected: []
на
selected: {}

Во-вторых, vue не умеет отслеживать данные, которых изначально нет в data и нужно явно указывать, что мы их меняем, поэтому в методе onSelect меняем строку
this.selected[day] = !this.selected[day];
на
this.$set(this.selected, day, !this.selected[day]);

https://ru.vuejs.org/v2/api/#vm-set
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы