Vuex: state updates, but computed property doesn't

Question

I have a component which takes a property called 'endpoints' from the store, adjusts it slightly...

computed: {
            ...mapState(['endpoints']),
            adjustedEndpoints () {
                if (this.endpoints){
                    return this.endpoints.map(x => {
                        x.displayName = x.name;
                        return x;
                    })
                }
            },

...and passes it to a table component in the template:

    <b-table show-empty
             stacked="md"
             :items="adjustedEndpoints"
             :fields="fields"
             :current-page="currentPage"
             :per-page="perPage"
             :filter="filter"
             :sort-by.sync="sortBy"
             :sort-desc.sync="sortDesc"
             :sort-direction="sortDirection"
             @filtered="onFiltered"
    >

The issue is that when I edit an endpoint's properties, I see it change in the Vue component state, but this is not reflected in the rendered component until reload. I am guessing that the adjustedEndpoints() function is not being called automatically.

How can I fix this?

Is displayName part of each endpoint before your computed runs? — Bert
– Bert, Commented Jun 5, 2018 at 13:51
Vue is not able to detect new property additions. You will need to use Vue.set (or this.$set). — Bert
– Bert, Commented Jun 5, 2018 at 13:53
Here is what I'm trying to understand; you are passing adjustedEndpoints to b-table. If I understand correctly, for now, the first render, that renders correctly and the displayName gets to the b-table and renders as you expect. Then, at some point, you change an endpoint, but the b-table doesn't update the way you expect? If that is the case, how exactly do you change the endpoint? I ask because, as mentioned above, Vue cannot always detect changes to an object or an array depending on how you update it which means that adjustedEndoints may not run after you change endpoint. — Bert
– Bert, Commented Jun 5, 2018 at 14:11

Boris K · Accepted Answer · 2018-06-06 08:59:59Z

3

Found the problem.

In my initial state in the Vuex store, I did not declare the 'endpoints' property.

That was the entire problem.

answered Jun 6, 2018 at 8:59

Boris K

3,58010 gold badges54 silver badges98 bronze badges

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

Collectives™ on Stack Overflow

Vuex: state updates, but computed property doesn't

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related