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

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

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


vue.js computed-properties
person drake035    schedule 17.12.2018    source источник

Ответы (1)


arrow_upward
4
arrow_downward

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

Согласно документам:

Если вы хотите создать копию и манипулировать ею, вы должны использовать момент # 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>

person Roy J    schedule 17.12.2018
comment
Я понимаю, но не полностью! Выражение this.monRaw.add(1, 'weeks'); изменяет значение this.monRay, верно? Затем я присваиваю это новое значение this.monRaw, которое, как я теперь понимаю, бесполезно (и, как вы говорите, оно присваивает себе объект). Но все же: this.monRaw должен получить НОВОЕ значение, а не старое, не так ли? - person drake035; 17.12.2018
comment
Это не меняет значение this.monRaw. Его значение - тот же самый объект (как определено его адресом в памяти), что и раньше. Его содержимое изменяется, но реактивность не обнаруживает подобных изменений содержимого. - person Roy J; 17.12.2018