nested object reactivity vue js

Question

I have the following setup for my vue application

var store = {
    ...
    state: {
        currentCustomer:{},
    },
};

current customer has a property that is an object called payment method

app:

 var app= new Vue({
el:'#application',
 data: {
  sharedState: store.state
  }
});

and a couple of components:

Vue.component('user_search', {
    template: '#user_search-template',
    data() {
        return {
            sharedState: store.state
        }
    },
    methods: {
        getCustomerData: function () {
                            this.sharedState.currentCustomer(c);
        }

    mounted: function () {
        ...         
    }
});

and

Vue.component('paymentdetails',{
    template: '#payment_details_template',
    data(){
        return{

            sharedState: store.state
        }
    },
    mounted:function(){
            ...

    }});

The issue is like this. The payment method component does not bind to the payment details object that is nested inside the current customer object

any suggestions?

make a computed property on the nested proerty. Alternatively force a rerender by changing the key on the component, it will then get the updated data. — Michael
– Michael, Commented Dec 11, 2019 at 12:53

Austin Gil · Accepted Answer · 2019-12-11 16:23:20Z

1

Yeah, I think what you are looking for is a computed property for accessing the data.

Vue.component('paymentdetails',{
    template: '#payment_details_template',
    computed{
        sharedState() {
            return store.state
        }
    },
    mounted:function(){
            ...

    }});

Maybe give that a try and see how it works.

answered Dec 11, 2019 at 16:23

Austin Gil

7216 silver badges6 bronze badges

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

Collectives™ on Stack Overflow

nested object reactivity vue js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related