vue $set

el-upload的bug

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

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

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

    <el-upload
                  class="upload-demo"
                  action="/api/v2/risk/uploadExcel"
                  :data="upLoadData"  
                  :on-success='flieSuccess'
                  :on-progress='flieProgress'
                  :show-file-list='showFileList'
                  multiple
                  :file-list="fileList">
                  <el-button size="small" type="primary" @click='changeUpDate'>导入数据</el-button>
                  <div slot="tip" class="el-upload__tip"></div>
    </el-upload>

upLoadData参数

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

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

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

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

看个例子

<template>
  <div>
   <div>
     姓名： {{obj.name}},
     <br>
     年龄: {{obj.age}}
     <br>
     性别：{{obj.sex}}
   </div>
    <button @click="addSex">点击我增加性别</button>
  </div>
</template>

<script>
  export default{
    data(){
      return{
      obj:{name:'',age:''}
      }
    },
    methods:{
      addSex(){
         this.obj.sex = 'gril'
     
      }
    },
    created(){
      this.obj.name = 'lilei'
      this.obj.age = '25'
    },

  }
</script>

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]))