一、前言
在Vue项目开发过程中，以父子组件的形式进行页面调用，在测试过程中发现IE9下，子组件中定义初始化数据dataA=0，执行异步逻辑A，在异步请求方法前，输出dataA结果为0，请求结束后时，后台返回值将dataA赋值为1，输出dataA结果为1。再次触发子组件同样事件，但后台请求结果不满足赋值条件，对dataA不做赋值操作，发现在异步请求方法前后，输出dataA结果为1！
伪码如下：
data () {
return {
dataA: 0
}
}
<script>
methods: {
clickA () {
alert(dataA) // IE9下首次触发事件，输出结果为0，第二次触发后台为对dataA赋值情况下，输出结果为1
asynRequestMethod ().then(response => {
if (response.isDataA) {
this.dataA = 1
}
})
alert(dataA)
}
}
</script>
在IE11浏览器下，上述异常输出结果并未复现，而是按照正常逻辑输出。
通过观察输出结果，初步判断IE9存在缓存机制。
修正后的伪码如下：
data () {
return {
dataA: 0
}
}
<script>
methods: {
clickA () {
alert(dataA) // // IE9下首次触发事件，输出结果为0，第二次触发后台为对dataA赋值情况下，输出结果为0
asynRequestMethod ().then(response => {
if (response.isDataA) {
this.dataA = 1
} else {
this.dataA = 0 // IE9下第二次触发后台方法回复dataA初始值
}
})
alert(dataA)
}
}
</script>
有关深层次的Vue机制及IE浏览器机制，欢迎踊跃讨论！
二、延伸阅读
在项目开发过程中遇到这样一个问题，新建表单时用element的select多选以后，在编辑的时候打开表单发现其他组件数据能正常显示，多选却无法正常回显。
表单代码如需：
<el-select
v-model="textForm.receDeptIds"
multiple
filterable
allow-create
default-first-option
@change="changeSelect"
placeholder="请选择接收部门">
<el-option
v-for="item in deptData"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
js逻辑代码如下：
// 编辑
handleEdit(data){
this.textShow=true;
this.textForm=data;
this.changeSelect(data); //触发此方法
},
changeSelect(data){
let UserIds = data.receUserIds.toString()
let peoData = UserIds.split(',')
peoData.foreach((item, index, peoData) => {
peoData[index] = Number(item) + ''
})
// 或者按照如下逻辑
// for(var i=0; i<peoData.length; i++)
// {
// peoData[i]=parseInt(peoData[i]) + ''
// }
this.textForm.receDeptIds = dpData
},
总结：changeSelect方法是在打开编辑表单后，对select多选选择器回显内容作处理的方法。由于el-select绑定值为字符数组类型，通过定义数组UserIds，需将拿到的数据先做一个toString后再赋值给UserIdS（不这样做，直接赋值的话，控制台会一直报split不是一个函数的错误）。用split方法将UserIds转换为逗号分隔的数组，对peoData作循环操作，每个元素去除双引号（Number或parseInt方法转一下就好）并转为字符。最终赋值给receUserIds。回显问题解决。
三、拓展阅读
© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END
