List Element

Demonstrates the use of ListElement in Laravel VueForm for creating repeatable and structured item entries. This form showcases nested layouts with GroupElement, allowing multiple columns and rows inside each list item. Each list entry can include various field types, such as text inputs, and supports validation rules to ensure consistent data entry. Ideal for forms requiring dynamic, repeatable, and organized input sections . Documentation

🧱 Import Class

use VueFormLaravel\Abstracts\VueFormBuilder;
use VueFormLaravel\Elements\Fields\TextElement;
use VueFormLaravel\Elements\Structure\GroupElement;
use VueFormLaravel\Elements\Structure\ListElement;
use VueFormLaravel\Elements\Vueform;

🧩 Example

• Input
• Output

class ListElementForm extends VueFormBuilder
{
    protected function buildForm()
    {
        return Vueform::build()
            ->schema([
                ListElement::schema([
                    TextElement::name('item_name')
                        ->label('Item Name')
                        ->rules('required'),
                    GroupElement::rowWith4Columns([
                        GroupElement::rowWith4Columns([
                            TextElement::name('first_name'),
                            TextElement::name('first_name_old')
                        ]),
                    ]),
                ])
            ]);
    }
}

⚙️ Allowed Attributes

⚡ Events

The following events Documentation are available for this element:

🔔 Example Usage of PHP

ListElement::name('example')
    ->events([
        'reset' => 'handleReset',
        'clear' => 'handleClear',
        'change' => 'handleChange',
        'add' => 'handleAdd',
        'remove' => 'handleRemove',
        'sort' => 'handleSort',
        '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 handleAdd({number} index, {any} addedValue, newValue, el$) {
    // Your code here
}
function handleRemove({number} index, value, el$) {
    // Your code here
}
function handleSort(value, {number} oldIndex, {number} newIndex, 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
}
---

## ⚙️ Available Static Methods

| Method | Description |
| --- | --- |
| `schema` | This method generates a List Element in VueForm, where each item in the provided |