Vue.js devtool change not showing up

Question

I am currently working with moment.js inside a Vue component but I am not seeing certain changes show up in vue devtools.

My example:

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

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

I am guessing this has something to do with the fact that I am calling a method on my moment data property instead of manipulating it directly like a number. An example like this works perfectly and updates my count in the vue devtools:

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

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

Is there any way to force the vue devtools to reload or show my change in any way?

Possible duplicate of [Why does vue.js not update the dom with datepicker using moment.js](http://stackoverflow.com/questions/40959483/why-does-vue-js-not-update-the-dom-with-datepicker-using-moment-js) — Saurabh, Mar 05 '17 at 18:06

score 1 · Accepted Answer · edited Jul 16 '22 at 02:59

Vue cannot detect certain changes inside an object, read this explanation from the official documentation to understand it better.

I think the easiest way to do what you are trying to achieve is to make a new date from your existing one in your prevMonth/nextMonth methods and assign it to this.moment, like so:

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

See working JSFiddle example.

Vue.js devtool change not showing up

1 Answers1