Не отображаются обновленные данные Vue при изминении свойства с датой

Question

На входе - имеем свойство 'today', вычисляемое свойство 'CURRENT_YEAR' и метод 'prevYear'. На выходе - при нажатии на стрелку влево вызывается метод который изменяет свойство (в нашем случае год) и в последствии чего шаблон должен обновиться и вывести новое значение из вычесляемого свойства. Но не получается добиться результата... Возможно из-за того, что объект Date устроен функциями и Vue не видит этих изменений. Может кто-то уже сталкивался с этой проблемой и знает как все же добиться обновления?

Vue.component('schedule-component', {
    data: function () {
        return {
            today: new Date()
        }
    },
    computed: {
        CURRENT_YEAR: function () {
            return this.today.getFullYear();
        }
    },
    methods: {
        prevYear: function () {
            this.today.setFullYear(this.today.getFullYear() - 1);
        }
    },
    template:
        `<section class="schedule">
              <h2 class="schedule-year">
                <span @click="prevYear" class="schedule-prevYear"> <-- </span>
                {{ CURRENT_YEAR }}
              </h2>
        </section>`
});

Сам год обновляеться и код работает, но проблема в том, что Vue не хочет отображать изминения (возможно из-за того, что объект Date устроен так, что Vue попросту не видит обновление в данных ибо Date построен на функциях и у него нету таковых свойств, за которыми можно было бы наблюдать), по этому и спрашиваю у вас, может вы знаете как решить это.

Answer 1

Я думаю, что Вы правы, в своем предположении

const schedule = Vue.component('schedule-component', {
  data: function() {
    return {
      today: new Date()
    };
  },
  computed: {
    CURRENT_YEAR: function() {
      return this.today.getFullYear();
    }
  },
  methods: {
    prevYear: function() {
      const newValue = this.today.setFullYear(this.CURRENT_YEAR - 1);
      this.today = new Date(newValue);
    }
  },
  template: `<section class="schedule">
              <h2 class="schedule-year">
                <span @click="prevYear" class="schedule-prevYear"> <-- </span>
                {{ CURRENT_YEAR }}
              </h2>
        </section>`
});

const app = new Vue({
  components: {
    schedule
  },
  el: '#app',
  template: `<div>
    <schedule></schedule>
  </div>`
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <div id="app"></div>

БЛОГ НА HUSL

Не отображаются обновленные данные Vue при изминении свойства с датой

Ответы (1 шт):