Question

我正在尝试浏览数日。所以我需要两个按钮“上一个”和“第二天”来更改格式化日期。

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

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

项目可以很好地使用其他变量，但是必须有更好的方法来完成这个简单的组件。

这是我所拥有的：

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

它不起作用，因为beucase Vue无法监视对象（Vue Reactivity in Depth: Change Detection Caveats）内部的突变。

这2行使对象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。

Answer 2

这实际上是我第一次使用Vue。

我在您的部门中添加了Moment，因为它可以轻松地按您希望的方式格式化日期。

我认为我已经将其简化为一个相当简单的解决方案。我确实遇到了一个问题，当我将日期存储为时刻对象（即使使用this.$set(this, 'date', this.date.add(1, 'day')或添加了深入的观察者）时，Vue对日期更改没有反应，所以我放弃了这种方法并进行存储将该日期作为unix时间戳（纪元秒）代替，可以正常使用：

let app = new Vue({
  el: "#app",
  data: {
    date: moment().startOf('day').unix()
  },
  methods: {
    dateString: function() {
      return moment.unix(this.date).format('DD-MM-YYYY (dddd)');
    },
    previous: function() {
      this.date = moment.unix(this.date).subtract(1, 'day').unix();
    },
    next: function() {
      this.date = moment.unix(this.date).add(1, 'day').unix();
    }
  }
});

.container {
  padding-top: 2rem;
}

.column {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
<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">  
  <div class="columns">
      <div class="column">
        <button class="button is-large is-fullwidth" @click="previous">PREV</button>    
      </div> 
      <div class="column">{{ dateString() }}</div>
      <div class="column">
        <button class="button is-large is-fullwidth" @click="next">NEXT</button>  
      </div>  
    
  </div>
</div>

注意：单击Run code snipet，然后单击Full Page（在右侧）以查看演示

观看更改并使用日期对象更新格式化的视图

2 个答案: