CODEWITHSUNDEEP
javascriptvue.js
Michael Paccione
Michael Paccione

Reputation: 2817

Vue.js State Updates but View doesn't rerender

I am enjoying learning Vue.js however I tend to keep running into the issue that when I set a data property based on state that it doesn't update the component if state changes.

For example...

Here are the snippets

<router-link v-if="!isDisabled" :to="{ path: '/effects' }">
   <button class="stepButton" :class="{ disabled: false }">Next</button>
</router-link>

<button v-else class="stepButton" :class="{ disabled: isDisabled }">Next</button>


data: function(){
            return {
                ailmentsLib: [
                    "Chronic Pain",
                    "Migraines",
                    "Muscle Spasms",
                    "Stress",
                    "Vertigo",
                    "Nausea"
                ],
                search: '',
                searchMatch: true,
                ailments: [
                    "Chronic Pain",
                    "Migraines",
                    "Muscle Spasms",
                    "Stress",
                    "Vertigo",
                    "Nausea"
                ],
                isDisabled: this.$store.state.ailment.length < 1 ? true : false
            }   
        }

I have the state as changing in my vue inspector but the button doesn't become enabled.

Upvotes: 0

Views: 163

Answers (2)

puelo
puelo

Reputation: 5977

The problem is that data() does not react to changes in the store. You need to use a computed property to watch for state changes. Example:

computed: {
    isDisabled: function ()  {
        return this.$store.state.ailment.length < 1
    }
}

Upvotes: 2

Shimrit Snapir
Shimrit Snapir

Reputation: 463

You can also use getters if you need to manipulate the data and reuse it. Getters Vuex

Upvotes: 0

Related Questions