When I use defer on app.js, there is a js plugin not working properly. If I remove defer, although the plugin works, but there is a warning to ask me to use defer, and I don’t know what to do. This is the test.blade.php If I use <script src=”{{ asset(‘js/app.js’) }}” defer>…
Tag: alpine.js
change value with AlpineJS
I’m making a website and learning AlpineJS. I’m trying to make a custom ‘checkbox’ (from tailwindcss) to make people agree to the Terms of Service. Now there’s probably already a better way to do this custom checkbox because now I’m replacing the entire checkbox when you cl…
How do I get a button id or value from x-on:click in Alpine JS?
Looking to extract a value or id in Alpine JS onclick, I thought this.id or this.value would work but no luck. Returns Alpine Expression Error: Can’t find variable: id Answer This might help you. <button @click=”alert($event.target.getAttribute(‘message’))” message=”Hell…
AlpineJS: which x-on directive to use inside tag? @click does not seem to work on tag
I’d like to trigger an action when a specific option is selected in select tag. @click works on every other tags, but when it doesn’t seem to work on option. Is there a directive like @selected where I can trigger an action when an option is selected? Answer You can’t attach events to <op…
Alpine.js: How to make ref element visible and focus on click?
When I press on the link “Hallo”, I want that the link “Okay” is visible and focused. However, when I click on “Hallo”, the “Okay” link will become visible, but its not focused. Only if I click again the link “Okay” will be focused. How can I achieve…
How can i do a iteration whit last value in Alpine JS?
It´s possible to make a sum using the current value and the previous value to generate a new column in the table, in an Alpine iteration? In code below: After code: i need to show balance (current .valor + last .valor) in a new column of my table. Is this possible? Thanks for all. Answer x-for has a way to
I can not set width/height of uploaded with with JS code
In Laravel 8 / tailwindcss 2 / Alpinejs 2.8 app I have a form when current image is shown and new image 1) can be selected with preview and 2) Saved by Js code with axios request 3) on successfull upload current image is replaces with new preview image and I have a problem when current image has big size
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 show a login button. Can I do this in pure client-side code,…
Alpine.js how to bind to DOM events with dots in the name
Using Alpine.js version 2.7.3, a component can listen to DOM events using x-on:[event].[modifiers]. But what syntax is used to listen to event names that have dots, like bootstrap’s show.bs.modal? In Vue.js, this can be done by a custom directive (from this question), but I think custom directives can n…
Alpine JS Table Data Binding
I’m a newbie in Alpine JS. I want to design my table with detailed rows like this: I wrote a simple HTML table like this: I tried to bind my JSON to this table. At that point, it did not work as expected. Here is what I tried: With this code, the output will look like this: User detail fields