HiddenElement
A form demonstrating usage of the HiddenElement field within Laravel VueForm. Documentation
🧱 Import Class
use VueFormLaravel\Abstracts\VueFormBuilder;
use VueFormLaravel\Elements\Fields\HiddenElement;
use VueFormLaravel\Elements\Vueform;
🧩 Example
class HiddenElementForm extends VueFormBuilder
{
protected function buildForm()
{
return Vueform::build()
->schema([
HiddenElement::name('foo')
]);
}
}
⚙️ Allowed Attributes
| Name | Data Type | Default | Example |
|---|---|---|---|
| conditions | array |
[] | HiddenElement::name("name")->conditions() |
| default | string|number|object |
null | HiddenElement::name("name")->default() |
| displayErrors | boolean |
true | HiddenElement::name("name")->displayErrors() |
| expression | string|object |
undefined | HiddenElement::name("name")->expression() |
| fieldName | string|object |
name | label |
| forceNumbers | boolean |
null | HiddenElement::name("name")->forceNumbers() |
| formatData | function |
null | HiddenElement::name("name")->formatData() |
| formatLoad | function |
null | HiddenElement::name("name")->formatLoad() |
| id | string |
null | HiddenElement::name("name")->id() |
| messages | object |
{} | HiddenElement::name("name")->messages() |
| meta | boolean |
false | HiddenElement::name("name")->meta() |
| name | string|number |
undefined | HiddenElement::name("name")->name() |
| rules | array|string|object |
null | HiddenElement::name("name")->rules() |
| submit | boolean |
true | HiddenElement::name("name")->submit() |
⚡ Events
The following events Documentation are available for this element:
| Name | Parameters | Description |
|---|---|---|
reset |
- {component} el$ - the element's component | Triggered when the input is resetted. |
clear |
- {component} el$ - the element's component | Triggered when the input is cleared. |
change |
- {string} newValue - the new value - {string} oldValue - the old value - {component} el$ - the element's component |
Triggered when the element's value is changed. |
beforeCreate |
- {component} el$ - the element's component | Triggered in beforeCreate hook. |
created |
- {component} el$ - the element's component | Triggered in created hook. |
beforeMount |
- {component} el$ - the element's component | Triggered in beforeMount hook. |
mounted |
- {component} el$ - the element's component | Triggered in mounted hook. |
beforeUpdate |
- {component} el$ - the element's component | Triggered in beforeUpdate hook. |
updated |
- {component} el$ - the element's component | Triggered in updated hook. |
beforeUnmount |
- {component} el$ - the element's component | Triggered in beforeUnmount (or beforeDestroy in Vue 2) hook. |
unmounted |
- {component} el$ - the element's component | Triggered in unmounted (or destroyed in Vue 2) hook. |
🔔 Example Usage of PHP
HiddenElement::name('example')
->events([
'reset' => 'handleReset',
'clear' => 'handleClear',
'change' => 'handleChange',
'beforeCreate' => 'handleBeforeCreate',
'created' => 'handleCreated',
'beforeMount' => 'handleBeforeMount',
'mounted' => 'handleMounted',
'beforeUpdate' => 'handleBeforeUpdate',
'updated' => 'handleUpdated',
'beforeUnmount' => 'handleBeforeUnmount',
'unmounted' => 'handleUnmounted',
])
🔔 Example Usage of JavaScript
function handleReset(el$) {
// Your code here
}
function handleClear(el$) {
// Your code here
}
function handleChange(newValue, oldValue, el$) {
// Your code here
}
function handleBeforeCreate(el$) {
// Your code here
}
function handleCreated(el$) {
// Your code here
}
function handleBeforeMount(el$) {
// Your code here
}
function handleMounted(el$) {
// Your code here
}
function handleBeforeUpdate(el$) {
// Your code here
}
function handleUpdated(el$) {
// Your code here
}
function handleBeforeUnmount(el$) {
// Your code here
}
function handleUnmounted(el$) {
// Your code here
}