Vue.js State Updates but View doesn't rerender

Question

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.

tony19 · Accepted Answer · 2022-07-15 22:54:13Z

2

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

edited Jul 15, 2022 at 22:54

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 3, 2018 at 22:08

puelo

6,0752 gold badges39 silver badges74 bronze badges

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

1 Comment

Jacob Goh Over a year ago

to be more precise, data is reactive. but it's not set up to update automatically whenever $store changes

Shimrit Snapir · Accepted Answer · 2018-06-04 05:08:19Z

0

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

answered Jun 4, 2018 at 5:08

Shimrit Snapir

4633 silver badges7 bronze badges

Collectives™ on Stack Overflow

Vue.js State Updates but View doesn't rerender

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related