CODEWITHSUNDEEP
componentsvue.jsvuex
Édouard Lopez
Édouard Lopez

Reputation: 43391

Why is the vuex component isn't updated, despite the state updating?

When I load my page, I fetch a list of optboxes items.

Sources

Project's sources are online:

optboxes pages

The HTTP request is well send and return adequate data:

created(){
    this.getOptboxes();
},
components: {
    'optbox': OptboxComponent,
},
methods: {
    getOptboxes() {
        optboxes.all().then((response) => {
            this.setOptboxes(response.data.output);
    }).catch(() = > {
            this.no_optbox_message = 'there is no optbox';
        logging.error(this.$t('optboxes.get.failed'))
    });
    }
},
vuex: {
    actions: { setOptboxes: actions.setOptboxes},
    getters: { optboxesList: getters.retrieveOptboxes}
}

I'm iterating over the results as follow:

<div v-for="optbox in optboxesList" class="panel panel-default">
     <optbox :optbox="optbox"></optbox>
</div>

Store

const state = {
    optboxes: {
        /*
        'akema': {
            hostname: "192.168.2.23",
            id: "akema",
            printers: [
                {
                    description: "bureau",
                    destination_port: 9100,
                    forward: "normal",
                    hostname: "1.2.3.4",
                    id: 0,
                    listening_port: 9102
                }
            ]
        }
        */
    }
};

Question

If I switch to another pages and come back then the list appear. I also notice that with the Vuex extension I can commit the state and see the changes.

Why are my changes not applied automatically?

Upvotes: 4

Views: 6854

Answers (3)

Herman Demsong
Herman Demsong

Reputation: 341

Using Vue.set dit it for me. Take a look here

Upvotes: 4

&#201;douard Lopez
&#201;douard Lopez

Reputation: 43391

I had to change my data structure due to Change Detection Caveats.

Due to limitations of JavaScript, Vue.js cannot detect the following changes to an Array:

  • When you directly set an item with the index, e.g. vm.items[0] = {};
  • When you modify the length of the Array, e.g. vm.items.length = 0.

Store

optboxes is now an array.

const state = {
    optboxes:[]
}

Then update my mutations accordingly to edit the array.

Upvotes: 5

user6163206
user6163206

Reputation: 43

Maybe it's an issue of reactivity?! I assume your setOptboxes mutation is not being picked up by vue:

setOptboxes(state, optboxes) {
    for (var optbox of optboxes) {
        state.optboxes[optbox.id] = optbox;
    }
}

You can read about it here:

https://vuejs.org/guide/list.html#Caveats

https://vuejs.org/guide/reactivity.html

The docs solution is to use:

state.optboxes.$set(optbox.id, optbox);

which will trigger a view update.

Upvotes: 4

Related Questions