Category "alpine.js"

How to re-init the AlpineJS component after Livewire re-renders?

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

Alpine.js: How do I access x-data from a function in an external file?

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 exam

Pikaday DD/MM/YYYY format opening as MM/DD/YYYY

I have a blade component with the following alpine code <div x-data="{ value: @entangle($attributes->wire('model')), picker: undefined }" x-init="new Pika

Inject html with unclosed tags with alpine.js

What is the proper way to inject a portion of html that have unclosed tags? I use the modulus in x-if for determine when close the row and start a new one. This

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. Whenev

how to change the image src in Alpine js like jquery?

there is a div with tag that by click on small image I change the src attribute and show it's the original size, but I don't know how to do in Alpine js? <

Alpine doesn't work for me on IOS (Safari and chrome)

I have a project with the TALL stack without any extra dependencies, it runs perfectly on Android and Windows, on chrome and edge. But in IOS, Safari or chrome

Tailwind and Alpine.js flicker

How do I fix flickering on tailwind and alpine.js? Already added x-cloak as per alpine.js . But still not fixed. If the "default" state of an x-show on page lo

x-bind with forwarded wire:model in a template element

Consider the following, in a blade template: <template x-for="(product, index) in getProducts()" :key="index"> <li class="flex items-center px-1 py