Alpine.js is a minimal framework for composing JavaScript behavior in your markup.
Questions tagged [alpine.js]
932 questions
-1
votes
1 answer
two x-data in one div
I'm trying to learn AlpineJS with HTML. It's very easy to hide/show one div. But when I try to make 2 items in the same div (dis)appear it doesn't work for the second one. I'm assuming it's an easy fix but I can't really find the answer somewhere.…

PiiMY
- 53
- 1
- 6
-1
votes
1 answer
Tailwind & Alpine.js radio button styling
I have a size selector as shown below and I'm trying to get the styling working with Alpine.js so that the selected size appears highlighted.
What is the correct code Alpine.js code to add classes depending on whether a radio box is checked or…

migu
- 4,236
- 5
- 39
- 60
-1
votes
1 answer
how can i set custom attribute with @ sign in javascript
i cant set a custom attribute for my button. Here is my code please check it, thanks.
btn.setAttribute('@click.prevent', 'login()')

mahdiros
- 37
- 3
-1
votes
1 answer
Dispatching browser event with property alpine js and livewire
I'm trying to pass parameter when dispatching an event on browser using alpine and livewire
On the 1st attempt the result is what i was expected , id match with the property i've passed :
But on the 2nd attempt, weird things happened, the id didn't…

owf
- 245
- 1
- 9
- 26
-1
votes
1 answer
Need to pass a input value to another DIV in AlpineJS
I need to pass the input values to a modal, but i can't do it with x-ref. Is this the right way to do it?

Paulo Monteiro
- 83
- 1
- 8
-1
votes
1 answer
Why my second script does'nt know the function in the first script?
The function ScrollToStage is using the function waitForScrollEnd defined in the first script. If I don't copy this function here it doesn't work, I got a reference error function waitForScrollEnd is not defined...
It's very ugly, I can't let my…

Eloise85
- 648
- 1
- 6
- 26
-1
votes
1 answer
-1
votes
1 answer
livewire inline table edit form stops submitting any request to server when it's hidden and only shown when edit is clicked
I am working on an inline component table edit functionality in Laravel livewire the form works fine when its shown as a regular table line but when I try to make it so the user gets the edit row when he clicks on edit the form stops submitting…

Saber Mrabt
- 1
- 1
- 6
-1
votes
1 answer
Self referencing an Array of JSON to call a function / to update
I'm currently transitioning from VueJS to AlpineJS and trying to update specific JSON arrays but it doesn't seem to be updating.
An example:
Any tips or reasonings why this is not working?
var foo = [
{ id: 0, title: 'test', text: c(…

RubberDuck
- 1
- 2
-1
votes
1 answer
How to pass a method as an argument in AlpineJS?
How can I dynamically call a method from another in AlpineJS? In the example below, foo() should call bar() to run the method it receives. This doesn't work, because 'Uncaught TypeError: callback is not a function'.
foo(){
…

kslstn
- 1,407
- 1
- 14
- 34
-2
votes
1 answer
Filter HTML list based on input's value
I have an HTML input and definition list:
- First
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Second
- Duis dui mauris,…

Miguel Moura
- 36,732
- 85
- 259
- 481
-2
votes
1 answer
Increment value every 4 seconds
Using HTML and AlpineJS I have the following:
I need the index to increment every 4 seconds and back to zero when…

Miguel Moura
- 36,732
- 85
- 259
- 481
-2
votes
1 answer
Binding classes issue with AlpineJS - ternary operator and curly brackets
EDIT: Due to the general syntax of AlpineJS, writing a ternary operator inside curly brackets is a mistake you may easily run into.
This is just a "grammar" issue but I really want to figure it out... Let's jump into it.
Everything is ok if I…
anon
-2
votes
1 answer
AlpineJs x-model value set not working to x-data out dive
Datatble Server Side Processing is dynamically comming from backend yajra datatable
`