Vue.js devtoolの変更が表示されない

Question

現在、Vueコンポーネント内でmoment.jsを使用していますが、特定の変更がvue devtoolsに表示されていません。

私の例：

export default { 
    data() { 
     return { 
      moment: moment(), 

     }; 
    }, 
    methods: { 
     prevMonth() { 
      this.moment.subtract(7, 'days'); 
     }, 
     nextMonth() { 
      this.moment.add(7, 'days'); 
     } 
    } 
}; 

私はこれは私が私の瞬間のデータプロパティのメソッドを呼び出す代わりに、数のようなそれを直接操作していたという事実とは何かを持って推測しています。このような例では完璧に動作し、VUEのデベロッパーツールで私のカウント数を更新します。

export default { 
    data() { 
     return { 
      count: 0, 

     }; 
    }, 
    methods: { 
     prevMonth() { 
      this.count--; 
     }, 
     nextMonth() { 
      this.count++; 
     } 
    } 
}; 

は、どのような方法で私の変更をリロードするか示すために、VUEのデベロッパーツールを強制する方法はありますか？

Answer 1

Vueオブジェクト内の特定の変更を検出することはできません、それをよりよく理解するために公式のドキュメントからthis explanationを読んでください。

私はあなたが達成しようとしているものを行うための最も簡単な方法は、あなたのprevMonth/nextMonth方法で、既存のものから新しい日付を作成し、this.momentに割り当て、そのようにすることだと思う：

prevMonth() { 
    this.moment = moment(this.moment).subtract(1, 'month'); 
}, 

参照してください。 working JSFiddle example。