vue-disabled

A vue directive to automatically disable buttons or other form elements when certain reactive data are true.

Install

npm i -S vue-disabled

Usage

import Vue from 'vue'
import VueDisabled from 'vue-disabled'
Vue.use(VueDisabled)

In a template of a vue component:

<template>
  ...
  <button @click="run" v-disabled="running">run</button>
  ...
</template>
 
<script>
export default {
  ...
  data() {
    return {
      ...
      running: false;
      ...
    }
  ...
  }
}
</script> 

When this.running turns true, the button is disabled, avoiding redundant operations like network loading etc. When this.running turns false, the button is recovered.