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。

Vue.js devtool 更改未显示

Vue.js devtool change not showing up

javascript

vue.js

vue-component

vuejs2