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 devtools 中的计数：

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

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

有没有办法强制 vue devtools 重新加载或以任何方式显示我的更改？

Answer 1

Vue 无法检测到对象内部的某些变化，请阅读官方文档中的this explanation 以更好地理解它。

我认为实现您想要实现的最简单的方法是在您的 prevMonth/nextMonth 方法中从您现有的日期创建一个新日期并将其分配给 this.moment，如下所示：

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

见working JSFiddle example。