Vue Vuex Component Not Updating When Store Changes

Question

I am having a reactivity gotcha with Vue Vuex. I'm using an open source countdown timer. In the code below item.dueDate reacts properly when the active item changes in the $store, (the new date shows on the page), however, the data passed to Countdown doesn't update. It holds the old value. It does work the first time, though. So, it's not updating. Why not? Thanks!!

    <template>
        <v-layout>
            <v-flex>
                <v-card v-if="item">
                    <v-card-text>
                        <h3>Countdown {{item.name}} - {{item.dueDate}}</h3>
                    </v-card-text>
                    <Countdown v-if="item.dueDate" :deadline="item.dueDate"></Countdown>
                </v-card>
            </v-flex>
        </v-layout>
    </template>

    <script> 
    import Countdown from 'vuejs-countdown'

    export default {    
      components: { Countdown },
      computed: {
                activeItem(){
                return this.$store.getters.activeItem
            },
            item(){
                return this.$store.getters.loadedItem(this.activeItem)
            }
        }
    }
    </script>

I highly suggest you taking a look at this: vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats — Derek Pollard
– Derek Pollard, Commented Jan 4, 2018 at 22:58
Thanks Derek -- I've reviewed these already but I can't quite put together why reactivity is working on the render part of the page, but not the Countdown.... ie. {{item.dueDate}} renders properly when it changes in the store. But <Countdown :deadline="item.dueDate"> does not re-render — Sean Rasmussen
– Sean Rasmussen, Commented Jan 4, 2018 at 23:34
I was able to work around this by modifying the Countdown component to include an updated() function... — Sean Rasmussen
– Sean Rasmussen, Commented Jan 5, 2018 at 0:01
mapGetters is just shorthand for creating a computed property from the store, but when there's only a couple, I just do em manually.... — Sean Rasmussen
– Sean Rasmussen, Commented Jan 5, 2018 at 13:34

Sean Rasmussen · Accepted Answer · 2018-01-15 13:50:59Z

2

The problem was with the Countdown module that I imported. When I opened it up, I saw why the component wasn't updating as expected.

The Countdown module sets the data only once on mounted

    mounted() {
        this.date = Math.trunc(moment(this.deadline) / 1000)
        }

So, if the component stays on the page as data changes, then it never updates again. I solved this by modifying the module to add an updated method, which did the trick...

    updated() {
        this.date = Math.trunc(moment(this.deadline) / 1000)
        }

Cheers, S

answered Jan 15, 2018 at 13:50

Sean Rasmussen

4536 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

Vue Vuex Component Not Updating When Store Changes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related