this is my full alpine.js code @{ int MOOD = 167; } <div x-data="{ 'showModal': false, variants: [] }" x-init="fetchVariants()" x-bind:data-product-id="@MOOD"> <!-- Trigger for Modal --> <button type="button" @@click="showModal = true">Open Modal</button> <!-- Modal --> <div class="fixed inset-0 z-30 flex…
I have a list of tasks that are each editable and have an image upload component. but if i upload an image in any of the components that aren't the first in the list it still renders in the first…
I tried to create a simple Laravel app with Alpinejs installed locally via Yarn. I followed a simple example from YT about creating Laravel blade components and it's working fine using the CDN version. But, not working on Alpinejs installed…
I'm doing system to buy promotion for ads, so each ad can have Stars and Days. I need to count sum of points for each Ad, then summ all points needed for all ads. Problem is that Total is always…
I read the documentation but I don't find anything about the :selected state in Tailwind CSS. Is there a way to achieve this with Tailwind or it can be only done with JavaScript? I simplified the problem as much as…
I'm working with Laravel and Alpinejs & I have this html on my Blade: <div class="form-group" x-data="{ show:false }"> <div class="col-md-12"> <div class="form-group"> <span class='text-danger'>*</span> <label>Date Formate</label> <select class="form-control select2" name=""> <option value="auto" x-on:click="show = false">Auto</option> <option value="manually" x-on:click="show =…
I make a draft implementation for my reusable input component. The code below obviously throws an error. Question is how to pass the $event back to register blade to get or log the value of the input? register.blade.php <div> <x-input…
I wanna use quill rich editor and other fields on my form. But cant get access to quill innerHTML from JS function. I am using Laravel with Alpinejs and my code is <form x-data="contactForm()" @submit.prevent="submit"> <div class="col-12"> <div class="mt-2 w-100…
I have a very simple x-for array loop using Alpine.js. I can’t seem to figure out why it is repeating multiple times. <ul x-data="{ skills: ['AWS', 'Terraform', 'PHP', 'Node.js', 'Vue.js', 'Golang', 'Laravel', 'Hugo', 'Docker', 'MySQL', 'Redis', 'Elasticsearch', 'API Design', 'HTML5',…
Trying to use AlpineJS in Woocommerce checkout. I have input number field with + - indicators to increase value, simplefield code: <div x-data="{ qty: 1 }"> <i @click="qty = qty > 2 ? qty - 1 : 1" class="icon-left-open"></i> <input…