vue-disable-all-input
A VueJs directive that allows you to disable/enable all input elements under a parent element
You may run into a scenario where you would want all input elements in a specific section to be disabled together. For example, clicking a button should disable all input elements in a form. In this case, instead of manually setting the disable attribute for each input element, you can bind v-disable-all-input
to the container element and simply toggle that flag instead.
Install
$ npm i vue-disable-all-input
# or
$ yarn add vue-disable-all-input
Usage
import Vue from 'vue'
import VueDisableAllInput from 'vue-disable-all-input'
Vue.use(VueDisableAllInput)
Add v-disable-all-input
as an attribute to the parent element containing children input elements that you wish to disable/enable
<template>
<div>
<div v-disable-all-input="isDisabled">
<input type="text" />
<div class="child-div">
<button> Click me </button>
<input type="textarea" />
</div>
<input type="checkbox" />
<div contenteditable="true">
Editable Div
</div>
</div>
<button @click="isDisabled = !isDisabled"> Toggle Disable </button>
</div>
</template>
<script>
export default {
data () {
return {
isDisabled: false
}
}
}
</script>
Apply to components
You can also add v-disable-all-input
to a component, which will apply the disable/enable input logic to all child components recursively.
Parent Component
<template>
<div>
<button @click="isDisabled = !isDisabled"> Toggle </button>
<ChildComponent v-disable-all-input="isDisabled" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
isDisabled: false
}
}
}
</script>
Child Component
<template>
<div>
<div contenteditable="true">
Content Editable Div
</div>
<input type="text"/>
<input type="checkbox"/>
<button> Click me </button>
</div>
</template>
<script>
export default {
name: 'ChildComponent'
}
</script>