Questions tagged [alpine.js]

Alpine.js is a minimal framework for composing JavaScript behavior in your markup.

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?
-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

Alpine JS: X-data async not initiating x-model

Here is the case : the HTML:
the JS: async function cmpForm(CMP) { let myData=[] myData= await…
Ledahu
  • 111
  • 8
-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(…
-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
` …
JsArt
  • 1
  • 3
-2
votes
1 answer

Reduce arrays in object

Lets say I have values I have assigned in array in objects. I want to use reduce() to add them up. The workflow will work like this: x-data=" {package_type: [], online_implant_meeting: [], total() { return "do the math here" }} then inside…
Francis
  • 115
  • 2
  • 12
1 2 3
62
63