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

HTML

@*Start Date

End Date *@

Reset filters

Get Edges

Get Nodes

Submit

Processing

的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;

}

}

}

});

+0

请添加的jsfiddle –