Conditional rendering
Learn how to render almost any part of your forms conditionally.
Element Conditions
We can pass an array
to :conditions
prop of any element:
<Vueform>
<CheckboxElement name="newsletter" text="Subscribe for newsletter" />
<TextElement
name="Email"
placeholder="Email address"
:conditions="[
['newsletter', '==', true]
]"
>
</Vueform>
If any of the conditions are failing the element will be invisible, its data will be excluded from requestData
and the element's available
property will become false
.
When a condition is provided as an array
, the first value must be the path
of an other element. The second is an operator that should define the type of comparison. The third is the expected value of the other field.
Available operators:
==
- expect equality!=
- expect inequalitynot_in
- expect not be be among an array of values>
- expect the other element's value to be higher>=
- expect the other element's value to be higher or equal<
- expect the other element's value to be lower<=
- expect the other element's value to be lower or equal
If we are checking for equality we can leave the operator and pass the expected value as the second param:
<TextElement :conditions="[['newsletter', true]]" ...>
The expected value can also be defined as an array
in which case any of its values will fulfill the condition:
<SelectElement name="delivery" :items="{
ups: 'UPS',
fedex: 'FedEx',
shop: 'In person'
}" ... />
<TextElement name="phone" :conditions="[
['delivery', ['ups', 'fedex']]
]" ... />
and
Condition)
Multiple Conditions (When multiple conditions are applied they must all be fulfilled:
<SelectElement name="delivery" :items="{
ups: 'UPS',
fedex: 'FedEx',
shop: 'In person'
}" ... />
<CheckboxElement name="ask_call" text="Ask for a call" ... />
<TextElement name="phone" :conditions="[
['delivery', ['ups', 'fedex']],
['ask_call', true],
]" ... />
or
Condition)
Functional Condition (A condition can also be a function
that receives form$
as a first param and el$
as the second if the condition is assigned to an element.
Here's an example of how we can do an "or" type condition:
<SelectElement name="delivery" :items="{
ups: 'UPS',
fedex: 'FedEx',
shop: 'In person'
}" ... />
<CheckboxElement name="ask_call" text="Ask for a call" ... />
<TextElement name="phone" :conditions="[
function(form$) {
return ['ups', 'fedex'].indexOf(form$.el$('delivery')?.value) !== -1 ||
form$.el$('ask_call')?.value
}
]" ... />
Conditions in Nested Elements
We can also apply conditions that point to nested elements by using their path with .
syntax:
<Vueform>
<ObjectElement name="registration">
<CheckboxElement name="newsletter" text="Subscribe for newsletter" />
</ObjectElement>
<TextElement
name="Email"
placeholder="Email address"
:conditions="[
['registration.newsletter', true]
]"
>
</Vueform>
List Conditions
We can reference elements in lists within the same instance using *
:
<Vueform>
<ListElement name="users">
<template #default="{ index }">
<ObjectElement :name="index">
<TextElement name="name" placeholder="Name" />
<CheckboxElement name="is_admin" text="Has admin rights" />
<CheckboxElement name="can_delete" text="Can delete posts" :conditions="[
['users.*.is_admin', true]
]" />
</ObjectElement>
</template>
</ListElement>
</Vueform>
Conditions on Form Steps
We can add conditions to FormStep
components:
<Vueform>
<template #empty>
<FormSteps>
<FormStep label="First" :elements="['first']" />
<FormStep label="Second" :elements="['second']" :conditions="[
['checkbox', true]
]" />
<FormStep label="Third" :elements="['third']" />
</FormSteps>
<TextElement name="first" placeholder="First input">
<TextElement name="second" placeholder="Second input">
<TextElement name="third" placeholder="Third input">
<CheckboxElement name="checkbox" text="Check me" />
<FormStepsControls />
</template>
<Vueform>
Any element contained in a step with conditions will only be part of requestData
if the step's conditions are fullfilled.
Conditions on Form Tabs
We can also add conditions to FormTab
components:
<Vueform>
<template #empty>
<FormTabs>
<FormTab label="First" :elements="['first']" />
<FormTab label="Second" :elements="['second']" :conditions="[
['checkbox', true]
]" />
<FormTab label="Third" :elements="['third']" />
</FormTabs>
<TextElement name="first" placeholder="First input">
<TextElement name="second" placeholder="Second input">
<TextElement name="third" placeholder="Third input">
<CheckboxElement name="checkbox" text="Check me" />
</template>
<Vueform>
Any element contained in a tab with conditions will only be part of requestData
if the tab's conditions are fullfilled.