Events & Hooks

#Subscribe For Events

To register an event listener for the Laraform component or any element, you can simply call the component's .on(event, callback) method.

export default {
  mixins: [Laraform],
  data: () => ({
    schema: {
      name: {
        type: 'text',
        label: 'Name'
      }
    },
    created() {
      this.on('change', () => {
        // `this.data` has changed
      })

      this.el$('name').on('change', () => {
        // name element's `data` has changed
      })
    }
  })
}
In the callback of the listener this refers to the component the listener is registered for.

Via Schema

Alternatively, elements can also register listeners via their schema by using the event name after 'on' (eg. onChange). This will have exactly the same effect as if they were registered with .on() method.

schema: {
  name: {
    type: 'text',
    label: 'Name',
    onChange() {
      // `this.data` has changed
    }
  }
}

Preventing Further Execution

Some events can prevent further execution of the code if they return false.

export default {
  mixins: [Laraform],
  data: () => ({
    schema: {
      name: {
        type: 'text',
        label: 'Name'
      }
    }
  }),
  created() {
    this.on('submit', () => {
      // implement your own submission logic

      return false
    })
  }
}

#Unsubscribe

To unsubscribe all listeners from an event you can call .off(event). This will remove all listeners registered for the event.

#Registering Hooks

Hooks are essential parts of each Vue component, known as Instance Lifecycle Hooks.

At a Laraform component these hooks are available just like at any other components as Laraform does not changes the core behavior of any of their components.

Elements however, as they are rendered by Laraform based on their schema involves no "physical" templates or components created by the user (unless using custom elements), so element hooks can't be created on their template. To still have hooks for elements you can define them in the schema property of any element as if they were at the component:

export default {
  mixins: [Laraform],
  data: () => ({
    schema: {
      name: {
        type: 'text',
        label: 'Name',
        created() {
          console.log('The element is created')
        }
      }
    },
    created() {
      console.log('The form is created')
    }
  })
}
In hooks this refers to the component the hook is registered for.

#Custom Events

Laraform and element components can not only use their built-in events, but you can create your own ones using .on(event, callback) method, while calling .fire(event) to call all callbacks registered for the event.

schema: {
  terms: {
    type: 'Checkbox',
    text: 'Accept Terms and Conditions',
    created() {
      this.on('checked', () => {
        console.log('Checkbox was checked')
      })

      this.on('unchecked', () => {
        console.log('Checkbox was unchecked')
      })

      this.on('change', () => {
        if (this.value == true) {
          this.fire('checked')
        } else {
          this.fire('unchecked')
        }
      })
    }
  }
}