button-loading directive for Vue2

button-loading.js

import Vue from "vue"

Vue.directive('button-loading', {
  update: function (el, binding, vnode) {
    //do nothing if value not changed
    if (binding.oldValue === binding.value) {
      return;
    }
    
    if (binding.value === true) {
      if ($(el).find('.fa.fa-spinner.fa-spin').length === 0) {
        $(el).prepend('<i class="fa fa-spinner fa-spin"></i>');
      }
      $(el).attr('disabled','disabled');
    } else {
      $(el).find('.fa.fa-spinner.fa-spin').remove();
      $(el).removeAttr('disabled');
    }
  }
});

/*
* Usage: simply add v-button-loading as a directive to your button 
* and bind a boolean value which should be true when you want the button to be
* disabled and show a font-awesome spinner
 
<button class="btn btn-primary" v-on:click="test" v-button-loading="busy">
 
* Vue part

data: () => ({
  'busy': false
}),

methods: {
  test: function() {
    this.busy = true;
    var self = this;
    setTimeout(function() {
      self.busy = false,
    },2000)
  }
}
*/