How to force render after an If condition in the html tag in svelte

Question

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.

Answer 1

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)
}