我想切换一个包含加载动画的按钮按钮,直到该函数完成使用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 –