CODEWITHSUNDEEP
javascriptvue.js
Rade Ilijev
Rade Ilijev

Reputation: 45

Vue update state

I have problems updating state with Vue. It's really simple problem so I will not post full code, because there is a lot of it. So the problem is that I'm updating some data with websockets, and until now everything worked fine, but now, when I tried to get this data as a state, it's not updating realtime. For example, I have a form that looks like this:

    props: ['order'],
    data() {
        return {
            client_form: {
                order_id: this.$route.params.id,
                client_id: this.order.client.id,
                fullName: this.order.client.fullName,
                email: this.order.client.email,
                phone: this.order.client.phone,
                city: this.order.client.shipping.city,
                address: this.order.client.shipping.address,
                zip: this.order.client.shipping.zip,
                province: this.order.client.shipping.province,
                comment: this.order.comment
            }
        }
    }

As you can see, I'm getting props order, and It's updating from parent component. So, if I call for example {{ order.client.fullName }} in template, it will update it realtime, but when I try with {{ fullName }} it's not updating.

What should I do to update this states?

Upvotes: 2

Views: 252

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

define client_form as computed property in order to watch route and props changes and returns the new values :

 props: ['order'],
 computed:{
    client_form() {
        return {
                order_id: this.$route.params.id,
                client_id: this.order.client.id,
                fullName: this.order.client.fullName,
                email: this.order.client.email,
                phone: this.order.client.phone,
                city: this.order.client.shipping.city,
                address: this.order.client.shipping.address,
                zip: this.order.client.shipping.zip,
                province: this.order.client.shipping.province,
                comment: this.order.comment
            }
        }
}

then in template do : {{client_form.fullName}}

Upvotes: 1

Related Questions