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>
