VueJS 反应性日期对象

Question

而是初学者的问题，但我在任何地方都找不到解决方案。

我有 2 个按钮可以将给定的 Date 对象增加/减少 +/- 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)
    }
  }
})

在控制台中，日期可以很好地增加/减少，但页面上呈现的日期保持不变。有人可以帮忙吗？谢谢。

Answer 1

您正在修改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)
    }
  }
})