我想切換一個包含加載動畫的按鈕按鈕，直到該函數完成使用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 –

總結

以上是生活随笔為你收集整理的html按钮冻结,Vue js按钮冻结dom的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。