Question

我在使用 Vue 更新状态时遇到问题。这真的是一个简单的问题，所以我不会发布完整的代码，因为有很多。所以问题是我正在使用 websockets 更新一些数据，直到现在一切正常，但是现在，当我尝试将这些数据作为状态获取时，它并没有实时更新。例如，我有一个看起来像这样的表单：

    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
            }
        }
    }

如您所见，我正在获取道具订单，并且正在从父组件更新。因此，如果我在模板中调用例如 {{ order.client.fullName }}，它会实时更新它，但是当我尝试使用 {{ fullName }} 时它不会更新。

我应该怎么做才能更新这个状态？

Answer 1

将 client_form 定义为计算属性，以便观察路由和道具的变化并返回新值：

 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
            }
        }
}

然后在模板中执行：{{client_form.fullName}}

Vue 更新状态

1 个答案: