Alpine.js is a minimal framework for composing JavaScript behavior in your markup.
Questions tagged [alpine.js]
932 questions
19
votes
4 answers
Hover over dropdown with Alpine JS
i wanna build a menu that is shown on mouseover and displays elements:
category:
- sub-category1
- sub-category2
I managed to accomplish that, but my problem is that when i hover over the menu and it shows the elements inside and i move the mouse…
RedZ
- 857
- 1
- 13
- 25
14
votes
2 answers
Refreshing data after-the-fact in AlpineJS
I'm using Alpine to display a list of items that will change. But I can't figure out how to tell Alpine to refresh the list of items once a new one comes back from the server:
CWD Subs
- 191
- 1
- 2
- 7
11
votes
6 answers
Reusable Alpine.js components?
How do I use Alpine.js to create a reusable component and display it? E.g., maybe I want to define an generic Alpine.js button component that changes text and color from parameters, then have my Alpine.js navbar component use the button component to…
spiffytech
- 6,161
- 7
- 41
- 57
11
votes
3 answers
How to prevent alpine.js modal from showing every time i refresh the page
i'm using alpine.js for my project and I have a modal that works well with alpine.js, my problem is that whenever you refresh the page, it shows for a second or two (while the page loads) and then goes away. I don't want to see it onload. Is there…
codemebro
- 133
- 2
- 8
8
votes
1 answer
TinyMCE 4 - allow AlpineJS attributes for all HTML tags
I want to allow all Alpine JS components (x-data, x-init, etc.) as attributes for all HTML tags in TinyMCE 4.
I tried to add them via a rule for extended_valid_attributes in different ways, but everything fails. Either they are still stripped from…
Iniii
- 81
- 1
8
votes
1 answer
scroll to top of page - livewire component - alpine js
I have an app created with laravel livewire where I'm loading a livewire component with multiple nested components that display one at a time depending upon a status variable. When each nested component is displayed the page is scrolled to the…
Justin
- 337
- 6
- 16
8
votes
2 answers
Tailwind CSS & Alpine JS transition out issue
I've got a very simple button & modal combo working inside Tailwind & Alpine - https://jsfiddle.net/0pso5cxh/
My issue is that on the leave transition (cancel button or close icon), none of the fade animation is happening at all and it just snaps to…
Andy Holmes
- 7,817
- 10
- 50
- 83
8
votes
1 answer
AlpineJS for dynamic select menu
Would like to be able to use Alpine.js to for a dropdown select form. When you select a particular option from the select menu the page insert a set of related records. How would I accomplish something like this with Alpine.js
For example
Select…
jmadd
- 115
- 1
- 1
- 6
7
votes
2 answers
Add and Remove dom elements using alpine JS
I am trying to build a custom add and remove entire div element from an array using alpine JS, here is my code which is working but instead of removing from the exact remove button click it will remove the last one on the array.
HTML
Kingsley Uchenna
- 580
- 3
- 15
7
votes
1 answer
Toggle elements with class using Alpine JS?
I'm trying out Alpine JS and coming from jQuery. How can I do this in Alpine jS?
$('a').on('click', function(e) {
$('div').not('.' + $(this).data('class')).hide('slow');
$('.' + $(this).data('class')).slideToggle();
});
a {
display: block;
}
…
SeaBass
- 1,584
- 4
- 20
- 46
7
votes
3 answers
Binded input value does not appear in request
I am trying to bind backAfterSaveStatus value to hidden input and for some reason then form is submited backAfterSave value is null.
After that I go back and submit form again - backAfterSave value is 1. Where is the problem?
I tried same thing…
keizah7
- 649
- 4
- 18
7
votes
1 answer
How to make flatpickr datepicker reactive in livewire / alpinejs app?
In my laravel 7 /livewire 1.3 / alpinejs 2 project
I added flatpickr datepicker from https://flatpickr.js.org
datepicker works ok, but reactive does not work. In the code below
$current_operation_date - public var in the component and is is modified…
mstdmstd
- 2,195
- 17
- 63
- 140
7
votes
3 answers
Alpine.js - nested components
I have code like this with nested components:
Marcin Nabiałek
- 109,655
- 42
- 258
- 291
7
votes
6 answers
How to check and uncheck all checkboxes by clicking one checkbox using alpine js
i am trying to use alpine js to check or uncheck all the boxes by checking or unchecking the select all checkbox respectively using alpine js, can any one please point me in the right direction... Thanks
Praneet Singh Roopra
- 71
- 1
- 1
- 6
6
votes
1 answer
Is the " npm run watch" property already in Laravel Vite?
Is the "watch" property already in vitejs?
I'm starting a new project using Laravel Framework 9.19.0 in which vite is auto-mounted.
I've added alpine.js for the front. I've tried to run
npm run watch
This is my package.json file
{
"private":…
Arotiana RANDRIANASOLO
- 111
- 1
- 8