Вычисляемое свойство не обновляется при изменении переменной данных - PullRequest
Новая
       15

Вычисляемое свойство не обновляется при изменении переменной данных

0 голосов
/ 17 декабря 2018

У меня есть переменная данных с именем 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() срабатывает только при загрузке страницы, а не после этого при нажатии кнопки.

Что здесь не так?

1 Ответ

0 голосов
/ 17 декабря 2018

Moment.add изменяет переменную момента, поэтому вы просто присваиваете тот же объект себе, что не приводит к изменениям.

За документы :

Если вы хотите создать копию и манипулировать ею, вы должны использовать момент # клон, прежде чем манипулировать моментом. 

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>
...