Menu
I got a printerList computed property that should be re-evaluated after getPrinters() resolve, but it look like it's not.
sources are online: optbox.component.vue, vuex, optboxes.service.js
<template> <div v-for="printer in printersList"> <printer :printer="printer" :optbox="optbox"></printer> </div> </template> <script> … created() { this.getPrinters(this.optbox.id); }, computed: { printersList() { var index = optboxesService.getIndex(this.optboxesList, this.optbox.id); return this.optboxesList[index].printers } }, vuex: { actions: { getPrinters: actions.getPrinters,}, getters: { optboxesList: getters.retrieveOptboxes} } <script> getPrinters({dispatch}, optboxId) { printers.get({optbox_id: optboxId}).then(response => { dispatch('setPrinters', response.data.optbox, response.data.output.channels); }).catch((err) => { console.error(err); logging.error(this.$t('printers.get.failed')) }); }, setPrinters(optboxes, optboxId, printers) { var index = this.getIndex(optboxes, optboxId); optboxes[index] = {...optboxes[index], printers: printers } }, Why does the printerList computed property isn't re-evaluated (i.e. the v-for is empty)
860
To update existing data, you can do so with the update method. Following example is some simple Vue Component handling data update with form data. The update method takes where condition and data as payload. where condition can be a Number or a String representing the value of the primary key of the Model.
However, when the page is refreshed, the data in vuex will be reinitialized, resulting in data loss. Because the data in vuex is saved in the running memory, when the page is refreshed, the page will reload the vue instance, and the data in vuex will be re assigned.
Vuex allows us to define "getters" in the store. You can think of them as computed properties for stores. As of Vue 3.0, the getter's result is not cached as the computed property does.
The second key defined in the store is the mutations key. As the name suggests, it contain an object of all of the properties responsible for making changes to the state .
It is due to this line: optboxes[index] = {...optboxes[index], printers: printers }.
You are directly setting item with index, which can't be observed by Vue
Try splicing the old item from array and pushing the new one.
180
You could do this:
Vue.set(optboxesList[index], 'printers', printers ) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
