Checking checkboxes updates in the backend but not the frontend
Hi ! I built a checklist . I noticed that while the back -end updates correctly , the visual representation in the checkbox doesn 't always reflect these changes . I 'm trying to figure out why the checkbox in a row remains checked even when the item it belongs to moves down due to the item sorting . If anyone has insights on this issue & sees what I am overlooking , please let me know ! I have added a video to show what I mean : https://www.loom.com/share/3930db8c89094bb383bd285584e2c583?sid=98a4fdd8-5d33-4e1c-ae66-28358d4117d8 The overall setup is complex as it is an expandable list with expandable items , but I had the same issue before I added the expansion . Also please ignore /forgive the complexity of my app atm - the next item on my list is to change the parts that should be components to components - it is intimidating to take that step though . . . It doesn 't determine it 's current value rather than an input I mean There are a few ways you can go about it An example is a 'toggle ' element . They 're really checkboxes under the hood but styled as a toggle so you mean to build a component that functions as a checkbox (eg when it is clicked it takes a different color and sets a variable ) ? It doesn 't need to hold a variable itself if you don 't want it to , it can just rely directly on the input value (for example via attributes ) But the main point is that the visual 'checked ' state would come from the data That might be a place to easily grab it from I built the component - and then had the exact same behavior π luckily it was a quick fix and I just had to exchange basing the visual state on the attribute instead of a variable . In the meantime , I also created components for my repeating titles and menu -bar . This is great and really not that hard , I should have started earlier π Thank you @Lucas G ! π₯2I was using the checkboxes somewhere else on the website and revisited this issue : I fixed it in March , but it is definetely not the perfect user experience as there is a pretty long delay between the click and the visual confirmation (the check box being checked ) . I have created a video that shows it here , the checkbox on the right is the one that is currently part of the app : https://www.loom.com/share/e9322f2701b142739938b94b2a80bf7b?sid=6744eef2-687e-4b43-8189-923bf497948c I have tried (among many less promising ideas in the past 3 hours π ) : - Creating a temporary variable in the checkbox component that triggers the 'checked ' class only when the APIs in the frontend are loading > did not work , visuals do not follow the item in the list . - The attribute for checked is based on the data . I tried basing the attribute for checked on a variable instead . This variable is either the data or on a checked value which is set when the workflow for updating starts and reset at the end of the workflow . > did not work , the checkboxes that are clicked earlier keep 'saved ' and are checked for a few seconds when another checkbox is checked . This seems like a problem that should have been solved somewhere in software dev before and I am missing the knowledge . Do you see any other options ?
.jpeg/public)