Skip to main content
1,134 questions
Newest Active Bountied Unanswered
Filter by
Sorted by
Tagged with
21 votes
7 answers
34k views

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 ...
spiffytech's user avatar
  • 6,700
21 votes
4 answers
38k views

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 ...
RedZ's user avatar
  • 1,011
19 votes
2 answers
28k views

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: <div x-data=" ...
CWD Subs's user avatar
  • 350
14 votes
4 answers
11k views

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 ...
codemebro's user avatar
  • 173
12 votes
5 answers
48k views

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 ...
Marc's user avatar
  • 1,470
9 votes
1 answer
29k views

I have an array of messages being pulled into view thanks to Laravel Echo, Livewire, and AlpineJS. <div class="mt-4 rounded-lg p-6" x-data="{{ json_encode(['messages' => $...
markusp's user avatar
  • 419
9 votes
1 answer
20k views

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 ...
jmadd's user avatar
  • 125
8 votes
2 answers
11k views

I have an alert component that I hide using AlpineJS but I want it to be visible again after Livewire re-renders. Showing the alert using Livewire component @if(Session::has('success')) <x-...
Mohamed Abdallah's user avatar
  • 1,034
8 votes
1 answer
10k views

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 ...
mstdmstd's user avatar
  • 3,309
8 votes
4 answers
19k views

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 ...
Reon Low Yiyuan's user avatar
  • 153
8 votes
6 answers
17k views

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... ...
Praneet Singh Roopra's user avatar
  • 89
8 votes
2 answers
15k views

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 ...
Kingsley Uchenna's user avatar
  • 718
8 votes
2 answers
8k views

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. <div x-data="appTimer()"> <div x-show="...
Alexd2's user avatar
  • 1,154
8 votes
1 answer
1k views

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 ...
Iniii's user avatar
  • 81
8 votes
1 answer
9k views

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 ...
Justin's user avatar
  • 287
8 votes
2 answers
5k views

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 ...
Andy Holmes's user avatar
  • 8,107
7 votes
3 answers
29k views

I'm trying to iterate through a loop and add a conditional class to each element above 4 items for some resposive styling with tailwindcss. Previously I had the loop adding in some other class, which ...
eggy1's user avatar
  • 73
7 votes
2 answers
9k views

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: <...
Michal Karbownik's user avatar
  • 1,477
7 votes
4 answers
20k views

This is kind of an example scenario what the problem looks like, <div x-data="{ count : 0 }"> <div x-data> <span x-text="count"></span> <button x-on:...
Irfan's user avatar
  • 1,030
7 votes
1 answer
8k views

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, ...
Alluziion's user avatar
  • 181
7 votes
3 answers
10k views

I have code like this with nested components: <html> <head> <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script> </...
Marcin Nabiałek's user avatar
  • 112k
7 votes
1 answer
17k views

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('...
SeaBass's user avatar
  • 1,784
7 votes
3 answers
1k views

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 ...
keizah7's user avatar
  • 753
6 votes
5 answers
8k views

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 ...
Elliot's user avatar
  • 1,601
6 votes
1 answer
4k views

How can I auto-hide a flash message in Alpine.js? (Say I want it to disappear after 4 seconds) <div class="flex mx-auto justify-between left-0 bottom-0 z-40"> <div class="...
xshapira's user avatar
  • 652
6 votes
1 answer
16k views

With alpine.js 2 I try to make timer with definition in footer (which is set for all layout) of the app : <div> <div x-data="appFooterComponent()" x-init=" console.log('...
mstdmstd's user avatar
  • 3,309
6 votes
3 answers
15k views

Suppose I have this html and I want to do something each time user changes the pet: <input type="radio" id="cat" name="pet" value="cat"> <input type=&...
Garfield Lasaga's user avatar
  • 418
6 votes
1 answer
10k views

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 <div ...
Elchy's user avatar
  • 181
6 votes
1 answer
11k views

I have a problem with the selected option in simple Alpine form part. My selectbox get its values from an api. The x-model is set before the fetch. The selectbox sometimes shows the correct selected ...
Maarten Heideman's user avatar
  • 595
6 votes
1 answer
2k views

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 ...
sail4lot's user avatar
  • 75
6 votes
1 answer
5k views

I use this loop <form action="/" method="POST"> <template x-for="(deck, index) in $store.cart.decks"> <div x-show="$store.cart.total(index) &...
rubo77's user avatar
  • 21.3k
6 votes
1 answer
9k views

I am new to Alpine, and I am wondering why my @click.away does not work. It should hide/remove the dropdown from the page. Live preview: https://codepen.io/fossil01/pen/XWRNqRz <li class="...
user avatar
6 votes
1 answer
4k views

I am wondering why this html / alpinejs is generating multiple console log entries when the button is clicked. <script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script> ...
jaime's user avatar
  • 2,364
5 votes
3 answers
11k views

I cannot get the console log after clicking on this element.However changing div to button will fetch result. Here is my code snippet. <div class="navbar"> <div x-on:click=...
Aman's user avatar
  • 51
5 votes
3 answers
13k views

I've made a multiple file-upload component using Laravel Livewire. After the upload is complete I want to display the uploaded files without reloading the page, like so: <div class="grid grid-...
Dirk Jan's user avatar
  • 2,444
5 votes
1 answer
9k views

I have a button, and when a user clicks it, an input element should be shown and it should have focus. I tried this: <div x-data="{ show: false }"> <input x-show="show&...
Jeroen van Rensen's user avatar
  • 63
5 votes
1 answer
14k views

I have a Datatable table being fed by AlpineJS: <template x-for = "user in users": key = "user.Id"> In x-for, I have the value of user.Id that I can list in a SPAN field, with the instruction x-...
Paulo Monteiro's user avatar
  • 93
5 votes
1 answer
18k views

When loading alpinejs it uncheckes all checkboxes, i don't know why it is doing so but it is. <div x-data="{ colors: [orange] }"> <input type="checkbox" value="...
Kevon's user avatar
  • 63
5 votes
1 answer
7k views

I'm fairly new to Alpine.js and looking to create a simple search/filter input to a list of items. I've seen some examples using <template>, but im not interested in that particular technique. ...
Aaron's user avatar
  • 65
5 votes
1 answer
6k views

I'd like to set the name attribute of hidden input fields in a loop with AlpineJS. I've tried x-bind:name but that doesn't work. I think this doesn't work because of the x-model in how todos are added:...
eskimo's user avatar
  • 2,645
5 votes
2 answers
2k views

So, I have a slight conceptual problem. I'll also admit I am primarily a back end developer and loose front end developer looking to learn better UI/UX principles/frameworks etc so apologies in ...
Micheal J. Roberts's user avatar
  • 4,260
5 votes
4 answers
2k views

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 &...
zaster's user avatar
  • 171
5 votes
2 answers
16k views

I'm trying to build a modal using Tailwind in alpine, point me to the right direction on building a full screen modal using Tailwind CSS and alpine js
kiki's user avatar
  • 71
5 votes
3 answers
9k views

<li class=""> <a @click.prevent="download(e)" data-video="video_id" data-url="{{ base_url('tools/download_thumbnail') }}" data-quality="maxres&...
Muhammad Saim's user avatar
  • 73
5 votes
4 answers
5k views

I am new in livewire. i am working on registration process of user. Register form is quite big and validations also working fine to me. The problem is when user submits the form validations came but ...
kunal's user avatar
  • 4,283
5 votes
3 answers
1k views

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 ...
Lee McAlilly's user avatar
  • 9,344
4 votes
1 answer
4k views

On tailwindcss, Alpinejs page I use modal which is opened by click on button. Problem is that while page is loading I see flashing dialog content. I tried to set hidden class to modal window and in ...
Petro Gromovo's user avatar
  • 2,363
4 votes
1 answer
33k views

I'm learning alpine.js and trying to capture the user input value. I have used "x-on:input" but its not calling the function Below is the simple form input <input type="email" ...
Shruti Nair's user avatar
  • 2,044
4 votes
1 answer
29k views

I'm just starting out with Alpine.js, I understand the basics but I'm having trouble applying them when moving functions outside of inline script tags. For example, in index.html: <div x-data="...
lpetrucci's user avatar
  • 1,789
4 votes
2 answers
5k views

I want to know How I can Convert Disable submit button from jQuery to alpine js? The Code : <form> <input type="text" class="input-field" placeholder="Enter you ...
jhon-jhones's user avatar
  • 515

1
2 3 4 5
…
23