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