Vue form guide
How to customize form
Use Visitors
Make sure you are familiar with the [Vue Form Visitors </book/bundles/vue-form-bundle/visitors>]{.title-ref}. Use the Theme
to add multiple FormVisitor
together, and apply them to a form. You can add the theme object to the FormFactory
to use it for all forms that will be created or just to single one on the create
function.
typescript
import {Theme} from "@enhavo/vue-form/form/Theme";
import {FormComponentVisitor} from "@enhavo/vue-form/form/FormVisitor";
import {FormFactory} from "@enhavo/vue-form/form/FormFactory";
let formFactory = new FormFactory();
let theme = new Theme;
// change the component
theme.addVisitor(new FormComponentVisitor('form-simple', 'form-custom-simple');
// add to all forms ...
formFactory.addTheme(theme);
// ... or as second parameter to a single form
let form = formFactory.create(form, theme);
Use Slots
If you want to change the html, you can use vue slots to overwrite parts of a component. The component must provide slots. Check the reference to check which are available.
First you use ThemeComponentVisitor
to replace the origin component. Then import this component and pass the form property.
vue
<template>
<form-list :form="form">
<template v-slot:item-down-button>Custom HTML</template>
</form-list>
</template>
<script lang="ts">
import {Vue, Options, Inject, Prop} from "vue-property-decorator";
import FormListComponent from "@enhavo/form/components/FormListComponent.vue";
@Options({
components: {'form-list': FormListComponent},
})
export default class extends Vue
{
@Prop()
public form: FormData
}
</script>