How to Reset a Form?

[Marcus]

I'm loading different submission: {data: {}} data into my form, but I couldn't find a way to reset the form. I thought I would set this.submission = {} but that just keeps the last loaded data inside the form, almost as if watch() (https://github.com/formio/vue-formio/blob/master/src/components/Form.ts#L54) in the component doesn't notice the change...

<formio id="formio-form" 
:form="form" 
:submission="submission" 
:options="options" 
v-on:submit="submit" 
v-on:submitDone="submitDone" 
language="de"></formio>

	var app = new Vue({
		el: '#app',
		data: $.extend({}, {
			// formio
			form: appdata.formio.form,
			submission: {},
			options: {},
		}, appdata),
		methods: {
			bootstrapModalHide(e){
				// RESET THE FORM
				this.submission = {};
			},
			bootstrapModalShow(e){
				this.submission = {};
				var form_data = {};
				const button = $(e.relatedTarget); // Button that triggered the modal
				const id = button.data('id');

				if(id){
					const form_data = collect(this.contactPersons).firstWhere('id', id); // find dataset
					// Setting form submission data works here.
					this.submission = {data: form_data};
				}
			}
		}
	})

How can I trigger resetForm() (https://github.com/formio/formio.js/blob/e4c96709d32e17c58b05436f483b879ea6fd9f27/src/Webform.js#L861) in the vue component?

[Joakim]

Have you tried an approach similar to this (i.e. use object assignment):
#25 (comment)

[Joakim]

I should have known this since I use other events to trigger submitDone and else.

You can tigger reset event by

<formio ref="formio-form" 
:form="form" 
:submission="submission" 
:options="options" 
v-on:submit="submit" 
v-on:submitDone="submitDone" 
language="de"></formio>

this.$refs['formio-form'].formio.emit('resetForm')

[Jeriah Henley]

We're currently addressing a backlog of GitHub issues. Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!