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 — Saurabh
– Saurabh, Commented Mar 5, 2017 at 18:06

tony19 · Accepted Answer · 2022-07-16 02:59:07Z

1

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.

edited Jul 16, 2022 at 2:59

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Mar 5, 2017 at 15:54

mzgajner

2,3481 gold badge17 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js devtool change not showing up

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related