Не удается изменить свойство объекта для компонента Vue (истинная аномалия) - PullRequest
Новая
       24

Не удается изменить свойство объекта для компонента Vue (истинная аномалия)

2 голосов
/ 24 мая 2019

Странная аномалия. Свойство объекта / компонента this.gridTiles устанавливается правильно, когда я сначала выполняю действие «отменить». Но затем, когда я выполняю действие «Повторить» (см. Код ниже), я не могу установить this.gridTiles на новое значение! Кажется, держится за старое значение. this.gridTiles - массив с вложенными элементами / объектами. Прямо перед тем, как я попытаюсь установить значение, оно дает мне правильное значение, если я назначу его переменной test. Очень странно! Любая помощь будет высоко ценится!

Примечание: cloneDeep () включен этим пакетом: [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');
        }
    },

Ответы [ 2 ]

1 голос
/ 26 мая 2019

console.log () показывал другое значение, чем когда я фактически использовал отладчик JS Chrome с точкой останова.Кроме того, я исследовал дальнейшие процессы и обнаружил, что какой-то другой пользовательский код возвращает значение обратно к старому / оригинальному.Мораль этой истории, console.log () может не всегда быть правильной, или может быть некоторое отставание?

1 голос
/ 24 мая 2019

Это может быть неправильный ответ и может быть комментарием, но слишком длинным, чтобы быть комментарием, поэтому я опубликую здесь.Надеется, что это поможет:

Код: 

        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 ??
        },

неправильно вводит каждую строку, которая использует this.Держу пари, что этот код: 

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

каким-то образом портит контекст this.Может быть, помещается в функцию обратного вызова, чтобы он терял контекст this компонента?

Вы должны войти this в setCurrentEntireState, чтобы проверить, действительно ли это компонент.

...