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:

<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>

<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:

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeUnmount (equals to beforeDestroy in Vue.js 2)
unmounted (equals to destroyed in Vue.js 2)

We can also subscribe to events after components are mounted:

<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:

form$.value.off('change')

This will unsubscribe all listeners from Vueform component's change event.