CODEWITHSUNDEEP
vue.jsquasar-framework
Alpha
Alpha

Reputation: 29

In Vue.js Web page does not update when state changes via update in nested objects?

In Vue.js, there are methods; Vue.set for adding and Vue.delete for deleting but for 'update' there are no Vue methods, instead you use Object.assign. Actually this is working fine if there are no changes in nested Objects. Is there a function in Vue like update or refresh, because I see state changed in Chrome Vue Extension tab but do not see the change in web page.

Vue view doesn't triggered for updates.

Example: When I added an item to "houses", I can't see the new house on the page, even I can see new item over inspect Vue, state. I can see the new item when I reload the page.

    "clients": {
    "oES4H0IMsYaCvGkSDKLmXkOkgXR2": {
        "CL_937fef22-cee7-4b14-9e4d-4e6751c82dab": {
            "name": "Adina Dowless",
            "email": "[email protected]",
            "phone": "(547) 515 53 91",
            "houses": {
                "0": {
                    "name": "sugarless",
                    "uavt": "832677187473",
                    "housePolicyId": "PO_7f12d27f-245b-41a6-92b4-dacb0256ccac",
                    "daskPolicyId": "PO_f5fba094-7272-41f8-a406-f9251df5a37f"
                },
                "1": {
                    "name": "intersexualism",
                    "uavt": "931095588844",
                    "housePolicyId": "PO_2d6b79d2-53a0-42f9-8445-df06c3b3bc5a",
                    "daskPolicyId": "PO_79f37178-0714-4c19-aa24-204ea3cf30e7"
                }
            }
        },
    }

Edit: I am using Quasar Framework, Vuex Library & Firabase Realtime Database.

So This clients object in a vuex store and initial data is coming from Firebase Database.

When adding client : Vue.set(state.clients, payload.id, payload.client) When deleting client : Vue.delete(state.clients, id) When updating client : Object.assign(state.clients[payload.id], payload.updates)

These functions are working properly when adding, deleting or updating clients first level properties like name or email,

When adding a new house into houses, firebase databse child_changed callback for clients is triggered, with all the updated data, but component in web page does not update.

Upvotes: 2

Views: 3164

Answers (1)

Radu Diță
Radu Diță

Reputation: 14191

You don't need a special method for doing updates. That's what Vue does on its own. But Vue only tracks keys that are present at the creation of a component.

Adding a new property to an existing object is not tracked by Vue.

You need to use Vue.set when adding new properties on an object so Vue knows to track the new properties as well.

So I think you should use Vue.set on the house object, or use Object.assign to create a new object.

Side note: it seems like you're using houses as an object when it's probably better off as an array. If you change it to array and use Array.push then Vue will track the changes. If you want to assign new items to the array at a specific index you should use Vue.set for arrays.

Upvotes: 4

Related Questions