vue 在监听里赋值不更新，或者是用下标给数组赋值不更新，解决方法

本文链接：https://blog.youkuaiyun.com/qq_38832375/article/details/89470731

在Vue中遇到监听内对数组fileList的progress字段赋值不更新的问题。通过使用vm.$set实例方法来确保数组元素的赋值能够触发视图更新，避免数据同步延迟。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

请看一下代码，reader.onload是一个监听

reader.onload = function (e) {
              fileData.file=e.target.result;
              let config = {
                //添加上传进度监听事件
                onUploadProgress: e => {
                  var completeProgress = ((e.loaded / e.total * 100) | 0) + "%";
                  /*vm.fileList[vm.nowEditIndex].progress = completeProgress;*/
                  var newObj=vm.fileList[vm.nowEditIndex];
                  newObj.progress = completeProgress;
                  vm.$set(vm.fileList, vm.nowEditIndex, newObj);
                }
              };
              vm.$axios.post('/hgServices/bxzs/uploadAttachment.shtml',fileData,config).then(result => {
                if(result.data.success){
                  console.log(result.data);
                  var newObj=vm.fileList[vm.nowEditIndex];
                  newObj.id=result.data.data.id;
                  newObj.success=result.data.success;
                  vm.$set(vm.fileList, vm.nowEditIndex, newObj);
                }else{
                  vm.$alert(result.data.msg, '提示').then(() => {});
                }
              }).catch(function (error) {
                console.log(error);
                vm.$alert('服务异常[1003]', '提示').then(() => {});
              });
            }

当我们在给fileList这个Array里的progress字段赋值的时候以下方式赋值不会及时更新：

vm.fileList[vm.nowEditIndex].progress = completeProgress;

正确的方式应该这样赋值：

 var newObj=vm.fileList[vm.nowEditIndex];
 newObj.progress = completeProgress;
 vm.$set(vm.fileList, vm.nowEditIndex, newObj);

这里用到了 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名！