Блог

Довольно начинающий вопрос, но я нигде не мог найти решения.

У меня есть 2 кнопки, которые увеличивают / уменьшают заданный объект даты на /- 1 день. Объект обновляется, но изменения не отображаются. Я узнал, что это потому, что объект Date Obj не реагирует, но я не нашел решения или обходного пути для этого.

Демонстрация JSFiddle

HTML:

 <div id="app">
  <button @click="inc">  1 day</button>
  <button @click="dec">- 1 day</button>
  <br /><br />

  {{date}}
</div>
  

JS / Vue:

 new Vue({
  el: "#app",
  data: {
    date: new Date()
  },
  methods: {
    inc () {
        this.date.setDate(this.date.getDate()   1)
        console.log(this.date)
    },
    dec () {
        this.date.setDate(this.date.getDate() - 1)
        console.log(this.date)
    }
  }
})
  

В консоли дата увеличивается / уменьшается нормально, но дата, отображаемая на странице, остается неизменной. Кто-нибудь может помочь с этим? Спасибо.

Вы изменяете date объект на месте, и в этом случае Vue не может обнаружить изменения, вместо этого создайте новый объект даты:

https://jsfiddle.net/13gzu8xs/1/

 new Vue({
  el: "#app",
  data: {
    date: new Date()
  },
  methods: {
    inc () {
      this.date.setDate(this.date.getDate()   1)
      this.date = new Date(this.date)     //  create a new date and assign to this.date
        },
    dec () {
      this.date.setDate(this.date.getDate() - 1)
      this.date = new Date(this.date)
    }
  }
})