Question

我有一个显示的组件有一个名为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>

title属性是绑定到组件的prop的一部分。但是在创建的回调期间动态添加了body属性。这是js：

Vue.component('controller', {
  template: '#controller',
  props: ['obj'],

  created: function() {
    this.obj.body = "BODY";
  },
});

new Vue({
  el: '#app',
});

问题是body属性没有被动反应。 body文本字段的更改未反映在{{ obj.body }}。

中

vue网站有一个关于Adding and Deleting Properties的部分，但我无法得到他们的建议。

这是展示问题的jsfiddle。

注意：有人建议我在body属性的同时声明title属性。这可行，但对于我的用例，需要动态添加属性。

Answer 1

尝试在传递prop：

时声明body属性

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

或者使用created方法：

created: function() {
    this.obj = {
        title: this.obj.title,
        body: 'some body
    }
},

https://jsfiddle.net/crabbly/33721g9w/

Answer 2

我选择此作为接受的解决方案，因为这是我向其他有同样问题的人推荐的。

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

我认为最好的方法是制作浅色副本：

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);也有效）。

Vue js动态添加属性而不是被动

2 个答案: