VueJS объект реактивной даты - PullRequest
Новая
       10

VueJS объект реактивной даты

2 голосов
/ 12 апреля 2019

Скорее вопрос новичка, но я нигде не мог найти решение.

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

JSFiddle Demo

HTML: 

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

  {{date}}
</div>

JS / Вю: 

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

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

1 Ответ

3 голосов
/ 12 апреля 2019

Вы изменяете объект 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)
    }
  }
})
...