Javascript Vue js动态添加的属性不反应

我有一个组件，它显示一个名为

obj

的道具

obj

有两个属性：

obj.title

和

obj.body

。每个字段都绑定到一个文本字段，以便响应和可编辑

<div id="app">
  <controller :obj="{title: 'TITLE'}"></controller>
</div>

<template id="controller">

  <input type="text" v-model="obj.title">
  <p>{{ obj.title }}</p>
  <input type="text" v-model="obj.body">
  <p>{{ obj.body }}</p>

</template>

问题是

body

属性的行为不反应。

{{obj.body}

不会反映对

正文

文本字段的更改

vue网站上有一个关于的部分，但我无法让他们的建议发挥作用

下面是一个演示该问题的示例

---

注意：有人建议我在声明

body

属性的同时声明

title

属性。这将起作用，但对于我的用例，需要动态添加属性。

在传递道具时，尝试声明

主体属性：

<controller :obj="{title: 'TITLE', body: null}"></controller>


我选择这个作为公认的解决方案，因为我会向其他有同样问题的人推荐它

用户注意到，只有更新道具的参考，才能重新建立反应性

我认为最好的方法是制作一个浅显的副本：

created: function() {
   this.obj.body = 'BODY'
   /**
    * ... other code that adds other properties and messes around with obj...
    */
   this.obj = Object.assign({}, this.obj);
}

。。。这里，
Object.assign
负责更新引用

IE目前不支持此解决方案，尽管任何“克隆”函数都可以（例如，
This.obj=jQuery.extend（{}，This.obj）；
也可以），但对于我的用例，我不知道该属性是否会被称为
body
，或者，即使在创建组件之前将添加任何额外的属性。我编辑了这个问题以澄清问题。有趣的是，我不明白为什么一个组件会创建这样的不同属性，但我用一个适合您的解决方案更新了答案。我接受了自己的解决方案，因为它解释了反应性被破坏的原因，并为最普遍的情况提供了解决方案。谢谢你的帮助，你为我指明了正确的方向。
created: function() {
    this.obj = {
        title: this.obj.title,
        body: 'some body
    }
},

created: function() {
   this.obj.body = 'BODY'
   /**
    * ... other code that adds other properties and messes around with obj...
    */
   this.obj = Object.assign({}, this.obj);
}