Nested properties are not reactive in Vue

Question

I have a component with nested properties:

 data () {
   return {
     config: {
       headers: ['a', 'b', 'c'],
       pagination: {
         currentPage: externalService.data.page
         totalPages: externalService.data.totalPages
       }
     }
   }
 }

When externalService.data.totalPages is changed (by other component), the child components are not reactive to this, since maybe the nested reference in config was changed, but not config itself.

I can use watchers to solve it, but I wish to know what would be the declarative (and optimal) solution for it. I'm not a fan of imperative approach when it comes to ClientSide.

Hammerbot · Accepted Answer · 2017-11-14 09:47:00Z

1

I assume that externalService.data.totalPages is an integer. Integer are passed by value and not by reference. So it's a completely normal behavior an you should indeed use a watcher.

answered Nov 14, 2017 at 9:47

Hammerbot

16.5k13 gold badges67 silver badges109 bronze badges

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

4 Comments

Chen Over a year ago

Thanks. I decided to simply wrap the primitive props with an object, so instead of watching, the reactive nature simply works.

Hammerbot Over a year ago

Yes, that's actually the best solution

HJo Over a year ago

Chen, could you elaborate on what you mean by wrapping the primitive props with an object?

alumi Over a year ago

@HJohnson like from 1 to {value: 1}

Collectives™ on Stack Overflow

Nested properties are not reactive in Vue

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related