Custom Functions

Overview
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.
Example
❌ Not Recommended
<span x-text="first_name + ' ' + last_name"></span>
Whilst this is convenient, it becomes significantly more challenging to maintain.
✅ Recommended
<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
Name
Description
Optional
$store
Reference to the components reactive store
✅
$el
Reference to the DOM element bound to the directive
✅
$event
Reference to the Event emitted from the user action
✅
Example
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">
</form>
function submitForm(store, evt) {
    evt.preventDefault();
    
    // reset the state
    store.displaySuccess = false;
    store.displayError = false;
    
    // log the fields data
    console.log(store.fields);
    
    //update the state to display the success message
    store.displaySuccess = true;
}

Name	Description	Optional
$store	Reference to the components reactive store	✅
$el	Reference to the DOM element bound to the directive	✅
$event	Reference to the `Event` emitted from the user action	✅

Set Value

Next - Fetch Examples

Get

Last modified 8mo ago