Search for a command to run...
this.$data vs sending all the data as an array or as an object as an argument to a global function
No comments yet. Be the first to comment.
Setting the content of an element with a number formatted with Indian currency
Defining a property to an object using Object.defineProperty()
Using PhotoSwipe v5 plugin and vanilla JavaScript with AlpineJS replacing jQuery for a photogallery section. Use of script type="module"
This is second part in the series to make use of getters and setters in an AlpineJS object, that converts INR to USD. Well, only a setter has been used here where a function call is made to the setter priceInINR when the textbox of the USD value chan...
Accessing a AlpineJS data in a vanilla JavaScript function out of the AlpineJS component
Alpine JS
15 posts
Content articles for AlpineJS (https://alpinejs.dev) - currently using alpinejs@3.15.11
I have a form coupled with AlpineJS.
<form
x-data="{ first_name: '', last_name: '' }"
method="POST"
@submit.prevent="submitForm"
>
I want the x-data details, first_name and last_name to be available in a global function.
One option is to retrieve the data via this.$data and other option is to pass the form data (which should be an array or an object) as an argument to the global function.
Passing the data as an object or as an array would reduce sending lots of arguments if there are, like, 30 or so variables.
Option 1: Get the data as this.$data
let submitForm = function()
{
const xData = this.$data;
const first_name = xData.first_name;
const last_name = xData.last_name;
console.log("First Name:", first_name);
console.log("Last Name:", last_name);
};
Option2: Send the data as an argument to the function.
let submitForm = (data) =>
{
console.log("data = ", data);
};
But this is only if x-data is defined as x-data="{ xData: { first_name: '', last_name: '' }}" and the submit handler includes the argument - @submit.prevent="submitForm2(xData)".
<form
x-data="{ first_name: '', last_name: '' }"
method="POST"
@submit.prevent="submitForm1"
>
<label>
First Name:
<input type="text" x-model="first_name" />
</label>
<label>
Last Name:
<input type="text" x-model="last_name" />
</label>
<button type="submit">Submit</button>
</form>
<script>
let submitForm1 = function()
{
const xData = this.$data;
const first_name = xData.first_name;
const last_name = xData.last_name;
console.log("First Name:", first_name);
console.log("Last Name:", last_name);
};
</script>
<form
x-data="{ xData: { first_name: '', last_name: '' }}"
method="POST"
@submit.prevent="submitForm2(xData)"
>
<label>
First Name:
<input type="text" x-model="xData.first_name" />
</label>
<label>
Last Name:
<input type="text" x-model="xData.last_name" />
</label>
<button type="submit">Submit</button>
</form>
<script>
let submitForm2 = (data) =>
{
console.log("data = ", data);
};
</script>
<script defer src="https://unpkg.com/alpinejs@3.12.3/dist/cdn.min.js"></script>
Online Demo: https://anjanesh.s3.amazonaws.com/demo/alpine/alpinejs-form-data.html