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

Posted super-scarlett

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue ---在for循环修改页面中某个值,页面没有及时刷新问题(使用this.$forceUpdate()解决)相关的知识,希望对你有一定的参考价值。

最近使用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() 
    
  
;

 

以上是关于Vue ---在for循环修改页面中某个值,页面没有及时刷新问题(使用this.$forceUpdate()解决)的主要内容,如果未能解决你的问题,请参考以下文章

Vue入门:Vue基础

【vue入门】vue安装方式

vue全家桶(Vue+Vue-router+Vuex+axios)(Vue+webpack项目)

vscode vue 模板文件生成

前端框架vue.js系列:Vue.extendVue.component与new Vue

什么是vue框架?