Events

There are many possibilities to listen to changes of the model data by events

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.

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

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

@mouseenter | @mouseleave

@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.

<!-- 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

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 - Change of Password Visibility

In this example you will change the password visibility using 'click' and 'input' event

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

    ...

    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