【工作记】vue组件上动态添加和删除属性

vue组件上动态添加和删除属性

vue动态添加和删除属性

// 添加
this.$set(this.obj, 'propName', val)

// 删除
this.$delete(this.obj, 'propName', val)

有时候我们直接赋值，视图不会更新

例子

循环

// 展开当前行
expand(row) {
	this.list.map(item => {
	  if (row.id !== item.id) {
	  	// 其他行收起
	    row.isExpand = false
	  }
	})
	// 展开当前行
	row.isExpand = true
}

上述代码，如果我们切换展开行时，row.isExpand = false并不会生效，其他行并不会收起

此时，需要动态添加属性
改成下面代码后，切换展开行时，其他行收起，当前行展开

expand(row) {
	this.list.map(item => {
	  if (row.id !== item.id) {
	    // 动态添加属性
	    this.$set(item, 'isExpand', false)
	  }
	})
	row.isExpand = true
}