CODEWITHSUNDEEP
javascriptvuejs2vue-componentvue.js
Stephan-v
Stephan-v

Reputation: 20339

Vue.js devtool change not showing up

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?

Upvotes: 0

Views: 453

Answers (1)

mzgajner
mzgajner

Reputation: 2348

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.

Upvotes: 1

Related Questions