Vue ---在for循环修改页面中某个值，页面没有及时刷新问题（使用this.$forceUpdate()解决）

Posted 2022-03-14 super-scarlett

最近使用vue开发时，在一个函数中使用for循环，改变了页面中的值，在函数中查看是修改成功的，但是页面中没有及时刷新。

解决方法：

运用this.$forceUpdate()强制刷新。

 

export default 
  data() 
    return 
      dataList:[],
    ;
  ,
  methods: 
    getData() 
      var _this = this;
      var dataList = [];
      dataList = response.data.data;

      for(var i=0;i<dataList.length;i++)
         _this.downloadBase64(dataList[i].fielID, i, dataList);
      

    ,
    downloadBase64(fielID, i, dataList) 
        var vm = this;
        $.ajax(
            url: AppInter.downloadBase64,
            asysc: true,
            data: 
                fileName: ‘1.jpg‘,
                fileId: fielID
            ,
            cache: !0,
            timeout: 2e4,
            dataType: "json",
            type: "POST",
            xhrFields: 
                withCredentials: !0
            ,
            crossDomain: !0,
            contentType: "application/x-www-form-urlencoded;charset=UTF-8",
            beforeSend: function () 
                vm.loading = weui.loading();
            ,
            success: function (response) 
                if (response.responseCode == ‘0‘) 
                    dataList[i].picUrl = ‘data:image/jpg;base64,‘ + response.data;
                    vm.dataList = dataList;
                    vm.$forceUpdate();
                 else 
                    weui.alert("请求错误，请稍候再试", function () , 
                        title: ‘温馨提示‘
                    );
                
            ,
            error: function (xhr, msg, err) 
                weui.alert("请求失败，请稍候再试", function () , 
                    title: ‘温馨提示‘
                );
            ,
            complete: function () 
                if (vm.loading.hide) 
                    vm.loading.hide();
                
            
        )
    
    
  ,
  created() 
      
  ,
  mounted() 
    
  
;