News & Changes

Deprecated: Combined Listener has been removed

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

<!-- deprecated and removed -->
<v-form-base @change="handler" />
<!-- use this instead --> 
<v-form-base @focus="handler" @input="handler" @blur="handler" />

Event signature simplified

v-on Directive with Custom ID like @input:form-base-simple="handler" is deprecated, no longer necessary and just use @input="handler" instead. If you continue to use it, a warning is issued to the console.

See Events

<!-- Default ID 'form-base' -->
<v-form-base 
  :model="myModel"
  :schema="mySchema"
  @input="handleInput"
/>

<!-- 
  With defined ID, there is no more 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"
/>

Breaking - Changed Signature of Slots

The signature of slots was changed and new options were added. You can now also inject slots into the vuetify controls you use. Which slots are available here can be found on the vuetify homepage.

See Slots

<!-- FORM #slot-[top|bottom]-[formbase-id || 'form-base']-->
  <template #slot-top-my-form="{id, index, obj}"></template>

  <!-- KEY #slot-[top|bottom|item]-key-[formbase-id]-[keypath] -->
  <template #slot-top-key-my-form-name="{id, index, obj}"></template>
  <template #slot-bottom-key-my-form-controls-check></template>

  <!-- TYPE #slot-[top|bottom|item]-type-[formbase-id]-[type of control]-->
  <template #slot-top-type-my-form-checkbox="{id, index, obj}"></template>

  <!-- 
       INJECT specific slot into exposed slot of vuetify control  
       #slot-inject-[slot to inject into control]-key-[formbase-id]-[keypath]
  -->
  <template #slot-inject-label-key-my-form-name="{id, index, obj}">
  
  <!-- TOOLTIP #slot-tooltip to activate you must have schema prop tooltip -->
  <template #slot-tooltip="{id, index, obj}">

Last updated