Using AlpineJS I have the following: <div x-data="pricing()" x-init="data = { plan: 'a' }"> <p><span x-text="calculate() + '€'"></span>per session</p> <select x-model="data.plan"> <option value="a">A</option> <option value="b">B</option> </select> </div> export default function pricing() { return { data: { plan: "", }, calculate()…
Using Alpine.js for the first time. I have a video tag to show the camera feed, in a modal, which is initialized when the video tag is initialized using <div x-data="initTestData()" @data-transfer.window="check=$event.detail.check; runningTest=true;" class="modal fade"> <video class="w-100 rounded" id="test-video" x-init="initTest(check)">…
I'm passing a paginated collection of products from my Livewire class into my Livewire component and it mostly works fine. However when I change page via the pagination (e.g. go from page 1 to page 2) I find that the…
I have a datepicker with tailwindcss and alpinejs and it works as expected: this is my index.html file: <!doctype html> <html lang="en"> <head> <title>Datepicker</title> <script src="https://cdn.tailwindcss.com"></script> <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script> <style> [x-cloak] {display: none !important;} </style> </head> <body class="flex justify-center"> <div…
I've been practising with Alpine.JS and attempted to create a back to top button. I've got stuck as the button does not hide at all, I'm trying to get Alpine to recognise when the user scrolls down to a certain…
Using AlpineJS I have the following code: <span class="value" x-text="calculate"></span> The function calculate returns a number. How to inside the x-text add the character "€" after the number?
I'm new to AlpineJS. I have some production knowledge of React and some basics of Vue. But one of the things I'm not getting about AlpineJS and I did not find a direct answer to this from any of the…
@{ int MOOD = 167; } <div x-data="{ variants: [] }" x-init="fetchVariants()" x-bind:data-product-id="@MOOD"> <!-- Trigger for Modal --> <div x-text="JSON.stringify(variants)"></div> </div> <script> function fetchVariants() { const productId = document.querySelector('[x-bind\:data-product-id]').getAttribute('data-product-id'); const url = `/Home/ProductDesc?ProductId=${productId}`; fetch(url) .then(res => res.json()) .then(res => {…
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…