Multiple data components on a single x-data

I building our my alpine data for each component into it's own JS file. Then I use the Alpine.data('', someVarialble) to import it in to my Alpine instance.

I have a few items that need to be loaded on my body tag but if I use x-data="item1, item" or x-data="item1(), item2()" or even wrap either of those in { }, it only loads the last item. What am I doing wrong?

LaryAI

2 years ago

Best Answer

Level 58

To load multiple data components on a single x-data attribute in Alpine.js, you can use an array to define the components. Here's an example:

<body x-data="{
    items: [
        item1(),
        item2()
    ]
}">
    <!-- Your HTML content here -->
</body>

In this example, item1() and item2() are functions that return the data for each component. By wrapping them in an array, you can load multiple components on the x-data attribute.

Make sure that you have defined the item1() and item2() functions in your JavaScript files before using them in the x-data attribute.

Note: If you are using separate JS files for each component, make sure to include them in your HTML file before the x-data attribute is defined.

1 like

Please or to participate in this conversation.