Question

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

我有2个按钮可将给定的Date对象增加/减少+/- 1天。对象已更新，但更改不显示。我发现这是因为Date Obj没有反应，但是我没有找到解决方案或解决方法。

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

VueJS反应式日期对象

1 个答案: