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></script>, then the x-mask plugin will not working. If
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 click it. So if you have tips for that, please let me know! With
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=”Hello World”>Say Hi</button> $event.target will give you access to the clicked element. Ref: https://alpinejs.dev/directives/on#the-event-object
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 <option> tags, but you can attach a
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 it with to show and focus the link with one click? Answer
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, without relying on a server templating
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 not be created in Alpine.js Answer It’s not possible at the moment
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