Vue js按钮冻结dom

Question

我想切换一个包含加载动画的按钮按钮，直到该函数完成使用v-if。但是当我按下按钮时，DOM冻结，span元素不变，直到函数调用结束。我如何让DOM不冻结并显示加载图标？非阻塞按钮按下可能是一个解决方案？

HTML

<form class="form-inline"> 
    <div class="form-group"> 

     <div style="display: inline-flex" class='input-group date' id='datetimepicker1'> 
      <input placeholder="Start Date" id="pick1" type='text' class="form-control"/> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div style="display: inline-flex" class='input-group date' id='datetimepicker2'> 
      <input placeholder="End Date" id="pick2" type='text' class="form-control"/> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 
    </div> 
    <div class="form-group"> 
     <input class="form-control" type="text" v-model="Keyword" placeholder="keyword"> 

    </div> 

     @*Start Date<input type="text" v-model="StartDate" placeholder="Start Date" style="width: 177px" /> 
     End Date <input type="text" v-model="EndDate" placeholder="End Date" style="width: 177px" />*@ 
     <button type="button" v-show="resetShow" class="btn btn-primary btn-lg " v-on:click="reset" id="reset-btn">Reset filters</button> 
     <button type="button" v-show="GetShow" type="button" class="btn btn-primary btn-lg " v-on:click="getEdges">Get Edges</button> 
     <button v-show="GetShow" type="button" class="btn btn-primary btn-lg " v-on:click="getNodes">Get Nodes</button> 
     <button v-on:click="send" type="button" class="btn btn-default" id="load" >Submit</button> 
    <span v-if="loading" id="loader" style="display:none"> <i style="font-size: 197%; color: purple" class='fa fa-circle-o-notch fa-spin'></i> <span style="font-size: 190%"> Processing </span> </span> 

的Javascript

var vm = new Vue({ 
el: '#main', 
data: { 
    resetShow: false, 
    Keyword: '', 
    StartDate: '2016-06-08T17:03:36.000Z', 
    EndDate: '2016-06-16T17:03:36.000Z', 
    Dialog: [], 
    EdgeList: [], 
    NodeList: [], 
    loading: false, 
    StartDate1: '', 
    GetShow: false 
}, 
// define methods under the `methods` object 
methods: { 

    getById: function(event) { 

    }, 

    send: function(event) { 


     this.loading = true; 
     console.log(this.StartDate1); 
     var StartDate = $('#datetimepicker1').data("DateTimePicker").date().utc().format().split('+')[0]+".000Z"; 
     var EndDate = $('#datetimepicker2').data("DateTimePicker").date().utc().format().split('+')[0]+".000Z"; 



     if (this.Keyword != null) { 

      var g = GetElasticSearch(this.Keyword, StartDate, EndDate); 
      s.graph.clear(); 
      s.graph.read(g); 
      sigma.canvas.edges.autoCurve(s); 
      s.refresh(); 
      // Start the ForceLink algorithm: 
      sigma.layouts.startForceLink(); 
      //Louv 
      var louvainInstance = sigma.plugins.louvain(s.graph, 
      { 
       setter: function(communityId) { this.my_community = communityId; } 
      }); 
      var nbLevels = louvainInstance.countLevels(); 
      console.log(nbLevels); 
      var partitions = louvainInstance.getPartitions(); 
      var nbPartitions = louvainInstance.countPartitions(partitions); 
      // Color nodes based on their community 
      s.graph.nodes() 
       .forEach(function(node) { 
        //console.log(node.my_community); 
        node.color = colors[node.my_community]; 
       }); 
      s.refresh({ skipIndexation: true }); 

      s.graph.nodes() 
       .forEach(function(node) { 
        node.color = colors[node.my_community]; 
       }); 
      s.refresh({ skipIndexation: true }); 

      this.loading = true; 
     } 
    } 








} 

}）;

Answer 1

当方法完成时，Vue可以异步更新DOM，可以这么说。

所以，你必须使函数的一部分需要很长时间的异步，所以它不会阻塞事件循环。您可以使用setTimeout(callback, 0)运行异步函数。

例子：https://jsfiddle.net/Linusborg/tn8q4sub/

（编辑：这个例子并不总是对我的工作，虽然我不太明白为什么那就是 - 给它自己的情况一试）

为您的代码，这应该是这个样子：

send: function(event) { 

    this.loading = true; 

    setTimeout(function() { 
    //rest of the send code. 
    // and at the end: 
    this.loading = false 
    }.bind(this),0) // the `bind(this)` is important! 
}