This is what I have in the html of my page :
{#each subCategories as subCategories}
{#key $cart}
{($cart.indexOf(subCategories.name) > -1)}
{#if ($cart.indexOf(subCategories.name) > -1)}
Test
{:else}
<div class="media ali list-group-item list-group-item-action clique" on:click={() => changeCart(subCategories.name)}>
<div class="media-left">
<Management/>
</div>
<div class="media-body" >
<h4 class="media-heading">{subCategories.name}</h4>
</div>
</div>
{/if}
{/key}
{/each}
for the js part this is what I have :
import { writable } from "svelte/store";
let cart = writable([]);
function changeCart(subCat) {
$cart.push(subCat);
console.log($cart);
}
But the problem is that the if condition don't reload / render another time and the change of case work only after going back to the previous component and going another time to this component.
Because Svelte's reactivity is triggered by assignments, using array methods like push and splice won't automatically cause updates.
Source: https://svelte.dev/tutorial/updating-arrays-and-objects
Solution:
import { writable } from 'svelte/store';
let cart = writable([])
function changeCart(subCat)
{
// $cart.push(subCat)
$cart = [...$cart, subCat]
console.log($cart)
}