# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wotamann.gitbook.io/vuetify-form-base/schema/events.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.