⚪
Vuetify-Form-Base
  • Introduction
  • News & Changes
  • Quickstart
    • Start with
    • Installation
    • Intro
    • Features
    • License
  • Form
    • Validation
  • Component
    • Async Loading
    • Attributes
    • From Schema to Component
    • Events
    • Grid
    • Slots
    • CSS
    • Custom Components
    • Tooltips
  • Schema
    • General
    • Autogeneration
    • Computed Schema
    • Display & Typography
    • Grouping Controls
    • Arrays
  • Input & Controls
    • Text-Field & Input
    • Checkbox, Switch & Sliders
    • Radio Buttons
    • Buttons
    • Select, Combo & Autocomplete
    • Lists & Treeviews
    • Date, Time & Color
    • Icons & Images
Powered by GitBook
On this page

Was this helpful?

News & Changes

PreviousIntroductionNextStart with

Last updated 4 years ago

Was this helpful?

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.

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

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

See

See Events
Slots