Comment on page
🦄
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}`;
}
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 | ✅ |
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;
}
Last modified 8mo ago