Home

1 minute read

Accessing Data Variables from AlpineJS

Tony Lea

Accessing Data Variables from AlpineJS

I've been becoming a huge fan of AlpineJS lately. Mostly because of how seamless it works with Livewire, but also because it's lightweight and easy to work with.

While working on a project using Alpine I needed a way to change a variable from outside of the element itself, and that's what we'll learn in this quick tutorial.

A Quick Example

As an example I'll create a simple button and a box. When I click the button it will toggle the box display on and off. This can be easily accomplished using Alpine like so:

<div x-data="{ showBox: true }">
    <button @click="showBox = !showBox">Toggle</button>
    <div x-show="showBox" style="width:50px; height:50px; background:red"></div>
</div>

This will result in the following example:

Pretty simple stuff, right? But, what if we wanted to click a button outside of the element itself? Something like this:

<div id="container" x-data="">
    <button @click="showBox = false">Hide Box</button>

    <div x-data="{ showBox: true }">
        <button @click="showBox = !showBox">Toggle</button>
        <div x-show="showBox" style="width:50px; height:50px; background:red"></div>
    </div>
</div>

Well, that's not going to work because we are calling showBox = false outside of the place it was created. So, the Hide Box button is pretty much, useless.

The Solution

This is where we'll learn the magic of __x 🤙

Changing the data from outside of our element means that we need a way to talk to the element and get the variable. We can do that by giving our element an ID, like so:

<div id="redBox" x-data="{ showBox: true }">
    <button @click="showBox = !showBox">Toggle</button>
    <div x-show="showBox" style="width:50px; height:50px; background:red"></div>
</div>

Now, if we wanted to get that showBox variable we can retrieve it from the window namespace using javascript like so:

window.hideBox = function(){
    document.getElementById('redBox').__x.$data.showBox = false;
}

Our full solution would look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Access Alpine Variables</title>
</head>
<body>
    
    <div x-data="{ data: true }">
        <button @click="hideBox()">Hide Box</button>

        <div id="redBox" x-data="{ showBox: true }">
            <button @click="showBox = !showBox">Toggle</button>
            <div x-show="showBox" style="width:50px; height:50px; background:red"></div>
        </div>
    </div>

    <script>
        window.hideBox = function(){
            document.getElementById('redBox').__x.$data.showBox = false;
        }
    </script>
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>

</body>
</html>

Not too shabby 😉

Conclusion

AlpineJS is still a fairly new javascript library, but there is huge potential. There may be a better way to do this in the future or there may be a better way right now 😂, but this worked for me, so I thought I would share my solution.

If you are new to Alpine, you may want to check out my Intro to AlpineJS tutorial. Additionally, be sure to checkout Alpine repo at https://github.com/alpinejs/alpine and give it a star ⭐