List Element

An element used to repeat elements.

Examples
Options
Properties
Methods
Slots
Events

#Examples

Form `data`:

Basic Usage

Renders a repeatable element using element option.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        list: {
          type: 'list',
          label: 'To-do',
          element: {
            type: 'text',
            placeholder: 'Write here...'
          },
          default: [
            'Write docs',
            'Create unit tests',
            'Set up npm',
          ]
        }
      }
    })
  }
</script>

Form `data`:

Repeating Objects

Renders a repeatable object using object option.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        list: {
          type: 'list',
          label: 'Team',
          object: {
            label: 'Team member',
            schema: {
              name: {
                type: 'text',
                placeholder: 'Name',
                floating: 'Name'
              },
              shirt: {
                type: 'text',
                placeholder: 'Shirt number',
                floating: 'Shirt number'
              },
            }
          },
          default: [
            {
              name: 'John',
              shirt: 23
            },
            {
              name: 'Kenny',
              shirt: 16
            }
          ]
        }
      }
    })
  }
</script>

Form `data`:

Nested List

Nests two object lists.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        list: {
          type: 'list',
          label: 'Schedule',
          object: {
            schema: {
              venue: {
                type: 'text',
                label: 'Venue',
                placeholder: 'Venue name',
                floating: 'Venue name'
              },
              events: {
                type: 'list',
                label: 'Events',
                object: {
                  schema: {
                    name: {
                      type: 'text',
                      placeholder: 'Event name',
                      floating: 'Event name'
                    },
                    starts: {
                      type: 'text',
                      placeholder: 'Starts at',
                      floating: 'Starts at'
                    }
                  }
                }
              }
            }
          },
          default: [
            {
              venue: 'Riverside',
              events: [
                {
                  name: 'Ceremony opener',
                  starts: '19:00'
                },
                {
                  name: 'Announcement',
                  starts: '20:00'
                },
              ]
            }
          ]
        }
      }
    })
  }
</script>

Form `data`:

Sorting Elements

Elements can be sorted by dragging using sort option.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        list: {
          type: 'list',
          label: 'Favorite colors',
          sort: true,
          element: {
            type: 'text',
            placeholder: 'Color'
          },
          default: ['red', 'green', 'blue']
        }
      }
    })
  }
</script>

Form `data`:

Sorting Objects With Storing Order

Elements can be sorted and order is stored in a meta element.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        list: {
          type: 'list',
          label: 'Favorite cars',
          sort: true,
          storeOrder: 'order',
          object: {
            schema: {
              make: {
                type: 'text',
                placeholder: 'Make',
                floating: 'Make',
              },
              model: {
                type: 'text',
                placeholder: 'Model',
                floating: 'Model',
              },
              order: {
                type: 'meta'
              }
            }
          },
          default: [
            {
              make: 'Dodge',
              model: 'Challenger'
            },
            {
              make: 'Tesla',
              model: 'Model X'
            }
          ]
        }
      }
    })
  }
</script>

Form `data`:

Auto-Ordering

Automatically orders elements when data is loaded using order option.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        list: {
          type: 'list',
          label: 'Favorite colors',
          order: 'ASC',
          element: {
            type: 'text',
            placeholder: 'Color',
            floating: 'Color'
          },
          default: ['red', 'green', 'blue']
        },
      }
    })
  }
</script>

#Options

Name	Type	Description
element	`object`	Schema of a child element if a single element should be used as list item. Either `element` or `object` should be used.
object	`object`	Schema of an object type element if an object type element should be used as list item. Either `element` or `object` should be used.
initial	`number`	Initial number of child instances.
sort	`boolean`	Whether the list items can be sorted by drag n drop.
storeOrder	`string`	The name of the element which should contain the order of the list item in case of an object list.
order	`string`	The default order direction of list items when data is loaded. Possible values: `null`, `'ASC'`, `'DESC'`.
orderBy	`string`	When using an object list the list items will be ordered by this element's values.
default	`string`	Value of element when the form is initially loaded or reseted.
disabled	`boolean`	Whether the field is disabled.

#Properties

Name	Type	Default	Description
children$	`object`	`{}`	Child components.
disabled	`boolean`	`false`	Whether the field is disabled.
initial	`number`	`1`	Initial number of child instances.
sort	`boolean`	`false`	Whether the list items can be sorted by drag n drop.
storeOrder	`string`	`null`	The name of the element which should contain the order of the list item in case of an object list.
order	`string`	`null`	The default order direction of list items when data is loaded. Possible values: `null`, `'ASC'`, `'DESC'`.
orderBy	`string`	`null`	When using an object list the list items will be ordered by this element's values. If `storeOrder` is defined, `orderBy` will be equal to that unless specified otherwise.
defaultValue	`array`	`null`	Value of element when the form is initially loaded or reseted.
instances	`array`	`[]`	Child instances.
prototype	`object`	-	The schema of a child.

#Methods

# .reset()

Resets the element to it's default state.

# .disable()

Disabled the field.

# .enable()

Enables the field.

# .add(data) @returns {number}

Parameters

data any : data to be set for added child.

Adds a child to the instances. Returns the index of the added children.

# .remove(index)

Parameters

index index : index of child to be removed.

Removes a child by its index.

#Slots

# children

Props

el$ object : The element component.

Contains the children of the element.

#Events

# add(indexes)

Parameters

indexes array : index(es) of added list items.

Triggered when the user adds a new list item or .add() method is invoked.

# remove(index)

Parameters

index number : index of child to be removed.

Triggered when the user removes a list item or .remove() method is invoked.

# sort(indexes)

Parameters

indexes object : an object containing newIndex and oldIndex.

Triggered when the user changes the order of the list items.