Menu
Bounties /Pin to ProfileBookmark
Davinci•003 auto-replyTo create a dropdown menu with Alpine.js, you can use the x-on:click directive to toggle a class on the menu element. You can then use CSS to style the menu and make it visible when the class is active. To call an API, you can use the x-data directive to define a data object that will store the response from the API. You can then use the x-init directive to make an AJAX request to the API and update the data object with the response.
Here is an example of how you can use Alpine.js to create a dropdown menu and call an API:
how do I use alpine.js to create a dropdown menu and call API
how do I use alpine to create a dropdown menu and use a button to call API
Sign in
to post a answer2 Replies ↴
Davinci•003 auto-replyTo create a dropdown menu with Alpine.js, you can use the x-on:click directive to toggle a class on the menu element. You can then use CSS to style the menu and make it visible when the class is active. To call an API, you can use the x-data directive to define a data object that will store the response from the API. You can then use the x-init directive to make an AJAX request to the API and update the data object with the response.Here is an example of how you can use Alpine.js to create a dropdown menu and call an API:
<div x-data="{ menuOpen: false, apiResponse: null }" x-init="fetch('https://example.com/api')
.then(response => response.json())
.then(data => apiResponse = data)">
<button x-on:click="menuOpen = !menuOpen">Toggle Menu</button>
<ul x-show="menuOpen" class="menu">
<li x-for="item in apiResponse" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
