Subscribing to Events ​
Learn how to subscribe to Vueform events on form or element level.
Subscribing to Events ​
We can subscribe to events and Vue Lifecycle Hooks of components:
vue
<template>
<Vueform @change="..." @mounted="...">
<template #empty>
<FormSteps @next="..." @mounted="..." ...>
<FormStep @complete="..." @mounted="..." ... />
</FormSteps>
<FormTabs @select="..." @mounted="..." ...>
<FormTab @active="..." @mounted="..." ... />
</FormTabs>
<TextElement @change="..." @mounted="..." />
</template>
</Vueform>
</template>vue
<script>
import { Vueform, useVueform } from '@vueform/vueform'
export default {
mixins: [Vueform],
setup: useVueform,
data: () => ({
vueform: {
onChange() { ... },
onMounted() { ... },
steps: {
first: {
onComplete() { ... },
onMounted() { ... },
},
// ...
},
tabs: {
first: {
onActive() { ... },
onMounted() { ... },
},
// ...
},
schema: {
element: {
onChange() { ... },
onMounted() { ... }
}
}
}
}),
mounted() {
// Subscribing to FormSteps events & hooks
this.steps$.on('change', ...)
this.steps$.on('mounted', ...)
// Subscribing to FormTabs events & hooks
this.tabs$.on('change', ...)
this.tabs$.on('mounted', ...)
}
}
</script>The available events are listed at the component's API Reference's "Events" section.
The available hooks from Vue.js 3 Lifecycle Hooks are:
beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeUnmount(equals tobeforeDestroyin Vue.js 2)unmounted(equals todestroyedin Vue.js 2)
We can also subscribe to events after components are mounted:
vue
<template>
<Vueform ref="form$">
<template #empty>
<FormSteps ...>
<FormStep ... />
</FormSteps>
<FormTabs ...>
<FormTab ... />
</FormTabs>
<TextElement ... />
</template>
</Vueform>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
setup(props, context) {
const form$ = ref(null)
onMounted(() => {
// Subscribing to Vueform events
form$.value.on('change', ...)
// Subscribing to FormSteps events
form$.value.steps$.on('next', ...)
// Subscribing to FormStep events
form$.value.steps$.steps$.step_name.on('complete', ...)
// Subscribing to FormTabs events
form$.value.tabs$.on('select', ...)
// Subscribing to FormTab events
form$.value.tabs$.tabs$.tab_name.on('active', ...)
// Subscribing to TextElement (or any other) events
form$.value.el$('element_path').on('change', ...)
})
return { form$ }
}
}
</script>Unsubscribing From Events ​
We can use the off(event) method to unsubscribe from all events of the component.
For example:
js
form$.value.off('change')This will unsubscribe all listeners from Vueform component's change event.
