🦄Custom Functions


Custom functions are written like any normal JavaScript function. A components reactive store can be accessed via the API or Magic Refs. We recommend the use of custom functions wherever possible to minimise complex logic creeping into attributes.


<span x-text="first_name + ' ' + last_name"></span>

Whilst this is convenient, it becomes significantly more challenging to maintain.

<span x-text="fullName($store)"></span>

In this example, we utilise the magic references available in attribute expressions.

function fullName(store) {
 return store.first_name + ' ' + store.last_name;
 // or return `${store.first_name} ${store.last_name}`;

Magic Refs



Reference to the components reactive store


Reference to the DOM element bound to the directive


Reference to the Event emitted from the user action


Here's the submitForm() function used in the x-on:submit example.

<form x-on:submit="submitForm($store, $event)">
    <input x-model="fields.first_name">
    <input x-model="fields.last_name">
function submitForm(store, evt) {
    // reset the state
    store.displaySuccess = false;
    store.displayError = false;
    // log the fields data
    //update the state to display the success message
    store.displaySuccess = true;

Last updated