How to trigger watch AFTER I read array from db?

Question

In my vue/cli 4/vuex opening page I need to fill select input with default value from
vuex store. To fill select input I need have selection items read from db and I have a problem that watch is triggered BEFORE I read data from db in mount event. I do as :

watch: {
    defaultAdSavedFilters: {
        handler: function (value) {
            console.log('WATCH defaultAdSavedFilters value::')
            console.log(value)
            if (!this.isEmpty(value.title)) {
                this.filter_title = value.title
            }
            if (!this.isEmpty(value.category_id)) {
                this.categoriesLabels.map((nexCategoriesLabel) => { // this.categoriesLabels IS EMPTY
                    if (nexCategoriesLabel.code === value.category_id) {
                        this.selection_filter_category_id = {code: value.category_id, label: nexCategoriesLabel.label};
                    }
                });

            }
        }
    }, // 

}, // watch: {



mounted() {            
    retrieveAppDictionaries('ads_list', ['ads_per_page', 'categoriesLabels']);  // REQUEST TO DB
    bus.$on('appDictionariesRetrieved', (response) => {
        if (response.request_key === 'ads_list') { // this is triggered AFTER watch
            this.ads_per_page = response.ads_per_page
            this.categoriesLabels = response.categoriesLabels
            // this.$forceUpdate() // IF UNCOMMENT THAT DOES NOT HELP
            Vue.$forceUpdate()  // THAT DOES NOT HELP
        }
    })
    this.loadAds(true)

}, // mounted() {

I found this Can you force Vue.js to reload/re-render? branch and tried some decisions, like

Vue.$forceUpdate()

but that does not work. If there is a right way to trigger watch defaultAdSavedFilters AFTER I read array from db ?

Modified BLOCK : I use Vuex actions/mutations when I need to read / keep /use /update data of the logged user, like defaultAdSavedFilters, which is defined as :

computed: {
    defaultAdSavedFilters: function () {
        return this.$store.getters.defaultAdSavedFilters
    },

Data ads_per_page(used for pagionaion), categoriesLabels(used for selection input items) has nothing to do with logged user, that is why I do not use vuex for them, and I use retrieveAppDictionaries method to read them from the db and bus to listen to them, which is defined as :

 import {bus} from '@/main'

Sure I have data( block :

export default {
    data() {
        return {
            ...
            ads_per_page: 20,

            categoriesLabels: [],
            ...
        }
    },


"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vuex": "^3.1.2"

Thanks!

score 1 · Accepted Answer · answered Feb 20 '20 at 14:42

1

Please add the data() method from you component. But I'm pretty sure it is NOT triggering because of the way you are assigning the result from the API call.

Try this:

mounted() {            
    retrieveAppDictionaries('ads_list', ['ads_per_page', 'categoriesLabels']);  // REQUEST TO DB
    bus.$on('appDictionariesRetrieved', (response) => {
        if (response.request_key === 'ads_list') { // this is triggered AFTER watch
            this.ads_per_page = [ ...response.ads_per_page ]
            this.categoriesLabels = [ ...response.categoriesLabels ]
        }
    })
    this.loadAds(true)
}

However, I don't understand what bus is doing for you and why you are NOT using Vuex actions/mutations

answered Feb 20 '20 at 14:42

Borjante

9,767
6
35
61

pLease, look at Modified BLOCK. @Borjante, in your piece of code I see only removed line with Vue.$forceUpdate( What to try? What do you propose ? – mstdmstd Feb 21 '20 at 04:54
I removed the forceUpdate but also changed the way you assign data to this.add_per_page & this.categoriesLabels – Borjante Feb 21 '20 at 09:49
Could you, please, explain what this wrappings means : " [ ...response.ads_per_page ]" ? Why it could salve the issue ? – mstdmstd Feb 21 '20 at 16:13
Try it out and tell me if it works. What you where doing is reasiging the values. That way VueJS can't know if you have modified the array. Another option that could work is looping the array and push() to `this.categoriesLabels`. Checkout this docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax – Borjante Feb 21 '20 at 17:05
I got console error vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid prop: type check failed for prop "perPage". Expected Number, String, got Array found in ---> and looking at console I see that WATCH value is set at first and db retrieved later. So with looping I do not see how it could help ? – mstdmstd Feb 22 '20 at 05:00

How to trigger watch AFTER I read array from db?

1 Answers1