README

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" />

Usage no npm install needed!