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改变没有出现

1 个答案: