CODEWITHSUNDEEP
javascriptvue.jsclone
GeneC
GeneC

Reputation: 103

Can't change object property for Vue component (a true anomaly)

A strange anomaly. An object/component property this.gridTiles does get set correctly when I do the "undo" action first. But then when I perform the "redo" action (see code below), I'm unable to set this.gridTiles to the new value! It seems to be holding on to the old value. this.gridTiles is an array with nested items/objects. Right before I try to set the value though, it's giving me the correct value if I assign it to a test variable. Very strange! Any help would be much appreciated!

Note : cloneDeep() is enabled by this package : [https://www.npmjs.com/package/clone-deep]

ComponentA.vue

    data() {
        return {
            gridTiles: [],
        }
    },

....

        setCurrentEntireState(historyParams) {
            let test = cloneDeep(historyParams.gridTiles); // CORRECT VALUE
            this.test = cloneDeep(historyParams.gridTiles); // we can set this arbitrary object property correctly
            //this.gridTiles = test;    // doesn't work
            //delete this.gridTiles;    // doesn't help even if we do this first
            this.gridTiles = cloneDeep(historyParams.gridTiles); // WRONG VALUE, WHY ??
        },

        getCurrentEntireState() {  // used in saving historyStack items, not shown
            return {
                gridTiles: cloneDeep(this.gridTiles)
            }
        },

....

        EventBus.$on('refreshHistoryStateForReceiptMap', (historyParams) => {
            this.setCurrentEntireState(historyParams);
            ....
        })

ComponentB.vue

    methods: {

        ....

        undoHistoryAction() {
            let historyParams = this.$store.getters.historyStack[this.$store.getters.historyIndex - 1];
            EventBus.$emit('refreshHistoryStateForReceiptMap', historyParams);

            this.$store.commit('historyIndexDecrement');
        },

        redoHistoryAction() {
            let historyParams = this.$store.getters.historyStack[this.$store.getters.historyIndex];
            EventBus.$emit('refreshHistoryStateForReceiptMap', historyParams);

            this.$store.commit('historyIndexIncrement');
        }
    },

Upvotes: 2

Views: 137

Answers (2)

GeneC
GeneC

Reputation: 103

The console.log() was showing a different value than when I actually used the Chrome JS debugger with a breakpoint. Also, I investigated further downstream and found that some other custom code was reverting the value back to the old/original one. The moral of the story, console.log() might not always be correct, or there might be some lag?

Upvotes: 1

Sergeon
Sergeon

Reputation: 6788

This may not be the correct answer and should maybe be a comment, but is too long to be a comment so I'll post here. Hopes this helps:

The code:

        setCurrentEntireState(historyParams) {
            let test = cloneDeep(historyParams.gridTiles); // CORRECT VALUE
            this.test = cloneDeep(historyParams.gridTiles); // we can set this arbitrary object property correctly
            //this.gridTiles = test;    // doesn't work
            //delete this.gridTiles;    // doesn't help even if we do this first
            this.gridTiles = cloneDeep(historyParams.gridTiles); // WRONG VALUE, WHY ??
        },

gets wrong every line that uses this. I would bet that this code:

 EventBus.$on('refreshHistoryStateForReceiptMap', (historyParams) => {
            this.setCurrentEntireState(historyParams);
            ....
        })

Is somehow messing with the this context. Maybe is placed inside a callback so it loses the this context of the component?

You should log this inside setCurrentEntireState to check if it really is the component.

Upvotes: 1

Related Questions