Vue jsボタンがフリーズする

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! 
}