Vue custom directive

by WILLIAM CORREA

HTML

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="vue">
  <input type="checkbox" v-model="disabled">
  <div v-disabled="disabled">Test</div>
</div>

JavaScript

// https://vuejs.org/v2/guide/custom-directive.html
// https://alligator.io/vuejs/component-lifecycle/

Vue.directive('disabled', function (el, binding) {
	if (binding.value) {
  	el.style.opacity = 0.5
    el.style.cursor = 'not-allowed'
    return
  }
  el.style.opacity = 1
  el.style.cursor = 'inherit'
})

new Vue({
  el: '#vue',
  data: {
    disabled: false
  }
})