Repeat multiple elements
Learn how to have multiple instances of the same element set.
To repeat multiple elements we can use ListElement with object option or with an ObjectElement when using inline mode:
template
<template>
<Vueform>
<ListElement name="work_history" label="Work history" :add-classes="{
ListElement: {
listItem: 'pt-6 mt-2 border-t border-gray-200'
},
ElementLabel: {
wrapper: 'text-[20px] font-semibold mb-4'
},
}">
<template #default="{ index }">
<ObjectElement :name="index">
<TextElement name="company" label="Company" />
<TextElement name="role" label="Role" />
<DateElement name="from" label="From" :columns="6" />
<DateElement
name="to"
label="To"
:columns="6"
:conditions="[
['work_history.*.current', false]
]"
/>
<CheckboxElement
name="current"
text="Currently working here"
:columns="6"
:add-classes="(form$, el$) => ({
CheckboxElement: {
container: {
'mt-9': el$.value
}
}
})"
/>
</ObjectElement>
</template>
</ListElement>
</Vueform>
</template>vue
<template>
<Vueform :schema />
</template>
<script setup>
import { ref } from 'vue'
const schema = ref({
work_history: {
type: 'list',
label: 'Work history',
addClasses: {
ListElement: {
listItem: 'pt-6 mt-2 border-t border-gray-200'
},
ElementLabel: {
wrapper: 'text-[20px] font-semibold mb-4'
},
},
object: {
schema: {
company: {
type: 'text',
label: 'Company',
},
role: {
type: 'text',
label: 'Role',
},
from: {
type: 'Date',
label: 'From',
columns: 6,
},
to: {
type: 'Date',
label: 'To',
columns: 6,
conditions: [
['work_history.*.current', false],
],
},
current: {
type: 'checkbox',
text: 'Currently working here',
columns: 6,
addClasses: (form$, el$) => ({
CheckboxElement: {
container: {
'mt-9': el$.value
}
},
})
}
}
}
},
})
</script>
