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>
动态添加属性：
扫描二维码关注公众号，回复：
2773618 查看本文章
