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