La propriété calculée n'est pas mise à jour en cas de modification de la variable de données.

Question

J'ai une variable de données nommée monRaw qui est un Moment objet représentant le premier jour de la semaine en cours :

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

Ensuite, j'ai une propriété calculée nommée weekTitle qui l'affiche avec du texte (il fait plus que cela dans mon projet, mais je l'ai simplifié ici) :

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

Enfin, une méthode nommée viewNextWeek() change ma variable de données au premier jour de la semaine suivante :

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

Dans mon modèle, j'affiche ma propriété calculée ainsi qu'un bouton déclenchant ma méthode :

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

Cependant, pour une raison quelconque, ma propriété calculée n'est PAS mise à jour lorsque je modifie la variable de données sur laquelle elle est basée.

Il n'essaie même pas de : mon alert() n'est déclenché qu'au chargement de la page, et plus après, lorsque l'on clique sur le bouton.

Qu'est-ce qui ne va pas ici ?

Answer 1

Moment.add fait muter la variable momentanée, de sorte que vous ne faites que réassigner le même objet à lui-même, ce qui n'entraîne aucun changement.

Par les docs :

Si vous voulez créer une copie et la manipuler, vous devez utiliser moment#clone avant de manipuler le moment.

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>