往响应式对象 this.$data 中添加一个属性, 并确保这个新属性同样是响应式的, 且触发视图更新. 它必须用于向响应式对象上添加新属性, 因为 vue 无法探测普通的新增属性 .
- data () {
- return {
- user: {
- name: '',
- id: ''
- }
- }
- }
如果直接给 user 增加属性
this.user.age = 30
虽然 user 的属性值 age 的值为 30, 但是页面上的视图是不发生任何刷新的, 只能展示 name/id 的值, age 值还是为空.
原因: 由于 vue.js 不能检测到对象属性的添加或删除. 因为 Vue.JS 在初始化实例时将属性转为 getter/setter, 所以属性必须在 data 对象上才能让 Vue.JS 转换它, 才能让它是响应的.
此时要解决上述问题, 给对象添加属性的时候, 页面视图跟着刷新, 可以用 set 的方法:
this.$set(this.user, "age", 30)
我在项目中遇到问题是数组的每一项都要动态添加响应式属性, 我这样写也是有效果的:
- for (let plan of this.formPayment.planList) {
- this.$set(plan, 'socialInsuranceRanges', [{value: '1', label: '有', code: '', price:''}, {value: '2', label: '无', code: '', price:''}]);
- }
还有一种情况是给已有对象添加多个属性, 可能会用到 Object.assgin(), 这种情况, 应该用两个对象创建一个新对象
不要这样写:
- Object.assign( this.user, {
- tel: 18888888888,
- sex: 'Y'
- })
而应该这样写:
- this.user = Object.assign( {}, this.user, {
- tel: 18888888888,
- sex: 'Y'
- })
来源: http://www.jianshu.com/p/e1e92965d4fe