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