Question

我有一个名为monRaw的数据变量，它是一个Moment对象，代表当前一周的第一天：

...
data() {
  return {
    monRaw: moment().startOf('isoWeek')
  }
},
...

然后，我有一个名为weekTitle的计算属性，它与一些文本一起显示（它比我的项目做得还多，但是在这里我简化了它）：

...
computed: {
  weekTitle: function() {
    alert('updating computed property...');
    return `Current week starting on ${this.monRaw.format('DD')}`;
  }
},
...

最后，名为viewNextWeek()的方法将我的数据变量更改为下周的第一天：

...
methods: {
  viewNextWeek: function() {
    this.monRaw = this.monRaw.add(1, 'weeks');
  },
...

在我的模板中，我显示我的计算属性以及触发我的方法的按钮：

{{ weekTitle }}
<button @click="viewNextWeek">Next Week</button>

但是由于某种原因，当我更改基于它的数据变量时，我的计算属性不会得到更新。

它甚至都没有尝试：我的alert()仅在页面加载时被触发，而在单击按钮之后不再触发。

这是怎么了？

Answer 1

Moment.add改变了矩变量，因此您只是将同一对象分配回自身，这不会导致任何变化。

每the docs：

如果要创建副本并对其进行操作，则应使用在操纵该时刻之前，使用moment＃clone。

new Vue({
  el: '#app',
  data: {
    monRaw: moment().startOf('isoWeek')
  },
  computed: {
    weekTitle: function() {
      alert('updating computed property...');
      return `Current week starting on ${this.monRaw.format('DD')}`;
    }
  },
  methods: {
    viewNextWeek: function() {
      const newValue = this.monRaw.clone().add(1, 'weeks');

      this.monRaw = newValue;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  {{ weekTitle }}
  <button @click="viewNextWeek">Next Week</button>
</div>

更改数据变量后，计算属性不会更新

1 个答案: