> For the complete documentation index, see [llms.txt](https://wotamann.gitbook.io/vuetify-form-base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wotamann.gitbook.io/vuetify-form-base/schema/events.md).

# Events

{% hint style="warning" %}

#### **`BREAKING: Combined Listeners were removed`**` ` 

Combined Event-Listener **'change', 'watch', 'mouse', 'display'** and **'update'** werde removed for better comprehensibility and simplification. Please use separate listener for each event.

v-on Directive with appended Custom ID like **@input:form-base-simple** is deprecated, no longer necessary and just use **@input** instead.

```markup
<!-- deprecated and removed -->
<v-form-base 
    id="my-form-base"
    @watch:my-form-base="handle" 
/>

<!-- use this instead --> 
<v-form-base 
    id="my-form-base"
    @focus="handle" 
    @input="handle"
    @click="handle" 
    @blur="handle" 
/>
```

{% endhint %}

### Listen to Component Events

We can use the v-on directive to listen to vuetify-form-base events and run some Code when they’re triggered. You can listen only to a single event or to any combination of events

### Available Events

> **@focus** | **@input | @click | @blur**&#x20;
>
> **@mouseenter | @mouseleave**&#x20;
>
> **@dragstart | @dragover | @drop**
>
> **@resize | @intersect | @clickOutside | @swipe**

v-on Directive with appended Custom ID like @input:form-base-simple="log" is deprecated, no longer necessary and just use @input="log" instead.

```markup
<!-- Default ID 'form-base' -->
<v-form-base 
  :model="myModel"
  :schema="mySchema"
  @input="handleInput"
  @resize="handleResize"
/>
<!-- 
  With defined ID, there is no difference declaring events 
  DEPRECATED 
  @input:form-base-simple="handleInput"
  NEW
  @input="handleInput"
-->
<v-form-base 
  id="form-base-simple"
  :model="myModel"
  :schema="mySchema"
  @input="handleInput"
/>
<!-- more events -->
<v-form-base 
  id="form-base-simple"
  :model="myModel"
  :schema="mySchema"
  @input="handle"
  @click="handle"
  @blur="handle
  "
/>
```

### Signature&#x20;

```javascript
handleEvent( {  on, id, key, value, params, obj, data, schema, parent, index, event } ){
// destructure the signature object 
}    
```

```
on -        Event Name  // focus|input|blur|click|resize|swipe|...
id -        Formbase-ID
key -       key of triggering Element
value -     value of triggering Element
params -    params object if available { text, x, y, tag, model, open, index }    
obj -       current Object containing { key, value, schema } 
data -      Model-Object
schema -    Schema-Object
index -     Index of arrays
parent -    Formbase Parent - if available  
event -     the native trigger-event if available 
```

### **Showcase - C**hange of Password Visibility&#x20;

In this example you will change the password visibility  using 'click' and 'input' event&#x20;

```markup
    <!-- HTML -->
    <v-form-base :model="myModel" :schema="mySchema" @click="change" @input="change">
```

```javascript
    ...

    mySchema: {
      firstPassword:{ type:'password', appendIcon:'visibility', .... }
    }
    
    ...
    
    change ({ on, key, obj, params }) {
      // test event is 'click' and comes from appendIcon on key 'firstPassword'
      if (on == 'click' && key == 'firstPassword' && (params && params.tag) == 'append') 
      {         
        // toggle icon
        obj.schema.appendIcon = obj.schema.type === 'password'? 'lock': 'visibility'
        // toggle visibility 
        obj.schema.type = obj.schema.type === 'password'? 'text': 'password'
      }
    }
```

### [Online Example](https://wotamann.github.io/validate)