1.0.19 • Published 3 years ago
vue-clear-on-disable v1.0.19
vue-clear-on-disable
A small package for Vue 2 and Vue 3 that clears HTML form fields when they're being disabled.
Install
Download the package
yarn
yarn add vue-clear-on-disable
npm
npm i vue-clear-on-disable
Use the package in your main file
Vue 2
import ClearOnDisable from 'vue-clear-on-disable';
Vue.directive('clear-on-disable', ClearOnDisable);
Vue 3
import ClearOnDisable from 'vue-clear-on-disable';
createApp(App)
.directive('clear-on-disable', ClearOnDisable)
.mount('#app')
Usage
Text
<input type="text" v-model="variable" :disabled="disableVariable" v-clear-on-disable />
Textarea
<textarea v-model="variable" :disabled="disableVariable" v-clear-on-disable></textarea>
Select
<select v-model="variable" :disabled="disableVariable" v-clear-on-disable>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
Checkbox
<input type="checkbox" v-model="variable" :disabled="disableVariable" v-clear-on-disable />
Radio
Radio buttons work a bit strange and can not simply be turned off. For this reason v-clear-on-disable
on radio buttons checks for the v-model and then changes it's value directly. This could cause weird behaviour but should work for most.
<input type="radio" value="one" v-model="variable" :disabled="disableVariable" v-clear-on-disable />
<input type="radio" value="two" v-model="variable" :disabled="disableVariable" v-clear-on-disable />
Toggle clear
In some cases you may decide not want to clear an input. In that case you can set the value with a boolean variable. If this boolean is set to false the form field will not be cleared.
<input type="text" v-model="variable" :disabled="disableVariable" v-clear-on-disable="mustClearBoolean" />
1.0.19
3 years ago
1.0.18
3 years ago
1.0.17
3 years ago
1.0.16
3 years ago
1.0.15
3 years ago
1.0.14
3 years ago
1.0.13
3 years ago
1.0.12
3 years ago
1.0.11
3 years ago
1.0.10
3 years ago
1.0.9
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago