Vue Js Button Freezes Dom

I am trying to toggle a span containing a loading animation on a button press until the function completes using v-if. But when I press the button the DOM freezes and the span elem

Solution 1:

Vue updates the DOM asynchronously, when the method is finished, so to speak.

So you have to make the part of the function that takes a long tim async, so it does not block the event loop.

You can use setTimeout(callback, 0) to run the function async.

Example: https://jsfiddle.net/Linusborg/tn8q4sub/

(Edit: The example does not always work for me though I don't quite get why that is - give it a try with your situation)

For your code, this should look something like this:

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