Hi guys I have this code to check if an item is selected
$: checkbox = $chosenPackage.products.find(e => e.id == selectedProduct.product.id && e.name == selectedProduct.product.name)?.variants.some(e => e.id == v.id && e.name == v.name) || false
I console.log the result and it always returns undefined however when i run it in the console, (replacing all the stores with duplicated objects) it returns the right value
It was working before but I had to change the structure of the store and that's when it stopped working, the markup behaves as it's supposed to, (all the classes for checkbox == true are applied) but it's not reactive, meaning when I remove a variant from the array it doesn't remove the classes, and when I check the store I see the variant has been correctly removed,
When the components rerender everything looks good, but it's supposed to rerender automatically if checkbox changes and checkbox is supposed to change automatically if anything in the store changes but it doesn't
any help would be greatly appreciated, thanks in advance
Edit: I just realized that in another part it does get updated
Here is the code that updates the store in the part that doesn't work
$chosenPackage.products.find(e => e.id == selectedProduct.product.id && e.name == selectedProduct.product.name).variants = [v]
So I am basically overwriting the entire array with the new selected variant
The problem is that you are using a method invocation inside your update assignment (find). As soon as there's such a method invocation, Svelte does not compile that into a "update the store" statement anymore because it can't know what that method does and if it would be right to update the store. Therefore use the update method in this case
chosenPackage.update(current => {
current.products.find(e => e.id == selectedProduct.product.id && e.name == selectedProduct.product.name).variants = [v];
return current;
});