Vue动态新增对象属性

Vue.set( target, key, value )

• 参数：

  • {Object | Array} target
  • {string | number} key
  • {any} value

• 返回值：设置的值。

• 用法：

  向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')，注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

 真实项目应用

WebApi返回一个Json对象称作A，这个A有四十多个字段，某些字段还是Json对象字符串，即A嵌套着a、b、c Json对象。要在页面响应式处理这些字段值，data就要初始化四十多个字段，噢？不止，因为嵌套了a、b、c Json对象，，那大约六十多个字段。写这么多字段？没必要。

数据库返回A对象如下（此处截图省略多个字段）：

data设置A对象：A即ConfigFormData里面的的Json对应a、b、c。其他属性动态添加例如TransitPort。  为什么a、b、c一定要初始化呢？往下看。

  ConfigFormData: {
          ConsignorInfoJson: {           
          },
          CustomerInfoJson: {          
          },
          AgentInfoJson: {
           
          },

在html赋值：假如没有初始化ConsignorInfoJson，则ConsignorInfoJson就是undefined。undefined怎么可以点出属性呢，如果不初始化就会编译出错。这里的TransitPort因为没有初始化，因此一开始是undefined。在页面显示空白。

<br> {{ ConfigFormData.ConsignorInfoJson.Addr=="" ? "":"Addr:"+ConfigFormData.ConsignorInfoJson.Addr}}

 <p class="title">中转港</p>
 <p class="content">{{ConfigFormData.TransitPort}}</p>

动态添加属性：