vue $set

el-upload的bug

今天用element ui的el-upload功能的时候，在edge浏览器上传一个excel文件但是一直跳转到首页
浏览器请求数据显示的是

此资源没有相应负载数据
此资源没有查询字符参数
此资源没有cookie

调试之后发现是没有传token给后台，后台接受不到token就会返回异常状态码，从而登出系统
但是我明明传了参数为什么没有一块传给后台了

    
                  导入数据
                  

    

upLoadData参数

    changeUpDate(){
        this.loadingText = '正在导入数据'
        this.upLoadData = {
            model: this.value,
            uid: this.uid,
            token: this.token
        }
    },

各种找，最后找打了一个关于vue机制的，才恍然大悟,它是这样写的

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。
如果在实例创建之后添加新的属性到实例上，它不会触发视图更新

意思就是说vue实例已经创建了，数据也都挂载在上面了，这个时候你在给一个对象增加新的属性，不好意思，我不伺候了

看个例子

image.png

按照正常的情况，当我点击按钮的时候性别这一项应该显示为 性别：gril
但是点击之后是没有增加的

为什么会这样呢？当去查对应文档时，你会发现响应系统 ,把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter,如上示例，将data在控制台打印出来会发现：

image.png

在age及name都有get和set方法,但是在sex里面并没有这两个方法，因此，设置了sex值后vue并不会自动更新视图；

所以这个时候就需要用到$set了
我们把按钮方法修改一下

  addSex(){
        this.$set(this.obj,'sex','gril')
      }

再次打印一下obj

image.png

点击按钮

image.png

ok 正常了

还有一种数组改变视图不更新的情况
参数时数组，下标 值
this.$set(this.onlineNumber,j,parseInt(number[i]))