动态给vue的Data添加一个新的属性数据更新但是页面没有更新，怎么解决

Vue不允许在已经创建的实例上动态添加新的响应式属性，若想实现数据与视图同步更新，可以采取下面三种解决方案：

• Vue.set()
• Object.assign()
• $forceUpdated()

Vue.set()

Vue.set(target,propertyName/index,value)

参数

• { object | array } target
• { string | number } propertyName/index
• { any } value

Object.assign()

直接使用Object.assign()添加到 对象的新属性不会触发更新，应创建一个新的对象，合并原对象和混入对象的属性

this.someObject = Object.assign({}.this.soml'keObject,{newProperty1:1,newProperty2:2...})

$forceUpdate

如果你发现你自己需要在Vue中做一次强制更新，99.9%的情况，是你在某个地方做错了事

$forceUpdate迫使Vue实例重新渲染

PS：仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件

使用场景

如果为对象添加少量的新属性，可以直接采用Vue.set()

如果需要为新对象添加大量的新属性，则通过Object.assign()创建新对象

如果你实在不知道怎么操作时，可采取$forceUpdate()进行强制刷新（不建议）