this.$set() vue + element

这几天写管理后台，遇到一个问题，刚好记录一下

以下是功能截图


这个功能是放在一个弹窗中的，截图的位置是一个数组，点击添加一个tag，就新增一个对象，删除tag，就删除了这个数组对应的那个对象，关闭弹窗的时候，需要将整个数组清空，并且还原成图一的样子

// 点击新增tag
addStep: function () {
    this.form.experts.push({
        fileLists: [],
        avatar: '',
        name: '',
        introduction: '',
        tag: '',
        grade: 0
    })    
    this.$message.success('新增成功');
},

一切都很顺利，但是关闭弹窗需要重置到初始的时候，就开始疯狂报错undifind，后面想明白，是因为改变了值，但是视图没有更新的原因，所以使用this.$set()方法来更新视图

// 关闭弹窗以后清除数据，恢复到原始状态
cleanAll () {
	xxxx
	let experts = [{
	     avatar:  '',
	     tag: '',
	     introduction: '',
	     fileLists:[],
	     grade: 0,
	     name: ''
	   }]
	this.$set(this.form, 'experts', experts)
}

在工作中，先解决问题，然后再想为什么，翻翻文档

看看用法this.$set(obj, key, value)

vue的原理，在创建实例的时候，遍历data里的值，监听getter和setter方法，一旦这些值更新了，就去触发对应的视图更新。

上面我进行清空弹窗或者是返回的时候，其实相当于去更新了新的data，但是这个时候并没去触发到getter和setter，没有更新视图，所以报错了