Skip to content

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

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

AlpineJs Extract value from select[option]

Trying to use the x-model.number to get values from select option to calculate the values. Using the below input text works. How do I translate it on the select option? Answer I believe it should work by putting the x-model on the select instead of the option. To make the selected state be correct, it’s […]