javascript - 监视更改并使用日期对象更新格式化 View

Question

我正在尝试进行几天的导航。所以我需要两个按钮“前一天”和“后一天”来更改格式化日期。

[ <<PREV ]    DD-MM-YYY (weekday)   [ NEXT >> ]

我有一个问题，因为我的日期变量是一个日期对象。我尝试了计算、方法和观察者，但没有简单的解决方案。

项目在使用附加变量时运行良好，但必须有更好的方法来完成这个简单的组件。

这是我所拥有的:

let app = new Vue({
  el: "#app",
  data: {
    day: new Date(),
    dayFormated: "not set",
    number: 1
  },
  computed: {
    dateFormated: function() {
      // computed values are cached 
      return this.showFormatedDate(this.day);
    }
  },
  watch: {
    day: {
      handler: function(val, oldVal) {
        // this is not working at all
        console("day changed");
        this.dayFormated = this.showFormatedDate(this.day);
      },
      deep: true
    },
    number: function(val) {
      // this updates dayFormated but this can't be best solution
      // and dayFormated is not set at the begining
      // this.dayFormated = this.showFormatedDate(this.day);
    }
  },
  methods: {
    previous: function() {
      console.log("prev");
      // when next line commented method showFormatedDate is not updating
      this.number--; 
      this.day.setDate(this.day.getDate() - 1);
    },
    next: function() {
      console.log("next");
      // when next line commented method showFormatedDate is not updating
      this.number++;
      this.day.setDate(this.day.getDate() + 1);
    },
    showFormatedDate: function(date) {
      let formated = date.toLocaleDateString(["pl-PL"], {
        day: "2-digit",
        month: "2-digit",
        year: "numeric"
      });
      formated +=
        " (" + date.toLocaleDateString(["pl-PL"], { weekday: "long" }) + ")";
      return formated;
    }
  }
});

.container {
  padding-top: 2rem;
}

.column {
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app" class="container">  
  
  <h1 class="subtitle has-centered-text">number: {{number}}</h1>
  
  <div class="columns">
    
      <div class="column">
        <button class="button is-large is-fullwidth" @click="previous">PREV</button>    
      </div> 
    
      <div class="column">data:<br>{{day}}</div>
      <div class="column">computed:<br>{{dateFormated}}</div>
      <div class="column">method:<br>{{showFormatedDate(day)}}</div>
      <div class="column">watch:<br>{{dayFormated}}</div>
    
      <div class="column">
        <button class="button is-large is-fullwidth" @click="next">NEXT</button>  
      </div>  
    
  </div>
</div>

Answer 1

这不起作用，因为 Vue 不监视对象内部的突变 ( Vue Reactivity in Depth: Change Detection Caveats )。

这两行改变了对象 day，但 Vue 没有看到变化，因为对对象的引用 (this.day) 保持不变:

this.day.setDate(this.day.getDate() - 1);
this.day.setDate(this.day.getDate() + 1);

如果你将其更改为分配一个新对象，它就会起作用，因为现在对 this.day 的引用已更改，并且 Vue 会注意到更改的值:

this.day = new Date(this.day.setDate(this.day.getDate() - 1));
this.day = new Date(this.day.setDate(this.day.getDate() + 1));

具有正确工作代码的笔 here .