Alpine.js is a minimal framework for composing JavaScript behavior in your markup.
Questions tagged [alpine.js]
932 questions
6
votes
2 answers
How to execute multiple statements within a single Alpine.js attribute?
I would like to execute multiple statements within a single Alpine.js event handler (however, I believe it could be generalized to any attribute).
An example of what I would like to achieve:
6
votes
5 answers
Force a full page reload in Livewire
I use Livewire and Alpine with Laravel 8.
I have a page with a Datatable (jQuery) and a Bootstrap modal.
The table is filled with some data from a list of model instances.
When I click on a button in the table, it opens the modal and allows to edit…

Marc
- 1,350
- 2
- 11
- 29
6
votes
4 answers
Alpine nested x-data
I am trying to learn Alpine and I am testing out nested x-data. I came across a GitHub issue with nested x-data. They provided a solution which I wanted to try out myself. However, when I try to replicate the code, it didn't print anything. There…

Reon Low Yiyuan
- 123
- 2
- 2
- 10
6
votes
1 answer
Livewire and Flatpickr - fails after rerender
This may be a basic question, but I'm struggling. Essentially I have a livewire component that updates an array of flight information that a user enters. Whenever the components get rerendered, the flatpickr functionality stops working entirely. I…

sail4lot
- 75
- 5
6
votes
3 answers
How to access a property or a method of alpine.js parent component from a child component?
This is kind of an example scenario what the problem looks like,
5
votes
3 answers
How to Install Alpine JS 3 with Rails 6.1 via Webpacker
Ever since AlpineJS upgraded to Alpine 3, I haven't been able to get it working with Rails 6 and webpacker, I've only been able to get it working when linking to the CDN version of Alpine.
In the past with AlpineJS 2 I've just had to run yarn add…

Lee McAlilly
- 9,084
- 12
- 60
- 94
5
votes
2 answers
Alpine Expression Error: Cannot set properties of null (setting '_x_dataStack')
I created a simple countdown with Alpine JS, but when timer is 0, I have an error.
First declare in x-data the function appTimer.
…

Alexd2
- 1,044
- 2
- 15
- 28
5
votes
1 answer
Why is alpinejs @click handler calling my console.log twice
I am wondering why this html / alpinejs is generating multiple console log entries when the button is clicked.
5
votes
4 answers
Alpine.Js - How can i Upgrade
I am using
https://github.com/laravel-frontend-presets/tall
and unable to upgrade the alpine.js version
I tried changing package.json
Changed from
"alpinejs": "^2.8.2",
Changed to
"alpinejs": "^3.1.0"
Edit :
npm install
npm run dev
but…

zaster
- 161
- 1
- 4
- 14
5
votes
1 answer
Skip a loop in alpine.js with x-if
I use this loop
5
votes
1 answer
Multiple class bindings in AlpineJS?
I'm trying to attach two :class bindings to a single element within an x-for loop. Usually this could be achieved by passing in a single object with multiple key:value pairs. In this instance however, one is a condition, the other is a property of…

Alluziion
- 151
- 1
- 10
5
votes
1 answer
Combine x-show & x-text toggle in alpine.js
I am new to alpine.js and i need to toggle the innerText of an element, does anyone know ho can i combine showing an element and changing the innerText of another element? here is my code

Elchy
- 171
- 5
- 16
5
votes
1 answer
Problem to concatenate AlpineJS x-text and HREF property
I have a Datatable table being fed by AlpineJS:
In x-for, I have the value of user.Id that I can list in a SPAN field, with the instruction x-text:

Paulo Monteiro
- 83
- 1
- 8
5
votes
4 answers
Is there a proper way to wire up Trix editor with Livewire?
When wiring together Trix editor content with Livewire, I am stumbling into problems. I believe that the issue is that when Livewire receives content from Trix, the content is swapped out and Trix becomes disabled. Is there a better way?
What I have…

Elliot
- 1,457
- 13
- 40