How to make if statement rerender component svelte

Question

Here is what I have for my script :

function changeCart(subCat)
{
        let addedCat = {id: subCat._id,name: subCat.name, name_categorie: subCat.name_categorie}

        let exist = $cart.some(element => {
            if(element.id === addedCat.id)
            {
                return true
            }
        })

        if(exist)
        {
            $cart.some(element => {
            if(element.id === addedCat.id)
            {
                $cart.splice($cart.indexOf(element, 1))
                return true
            }
        })

        }
        else
        {
            $cart = [...$cart, addedCat]
        }

        console.log($cart)

}

and here is my html :

{#each subCategories as subCategories}
  {#if ($cart.indexOf(subCategories.name) > -1)}
    <div class="media ali list-group-item list-group-item-action  clique selected" on:click={() => changeCart(subCategories)}>
      <Management/>
      <div class="media-body"  >
        <h4 class="media-heading">{subCategories.name}</h4>
      </div>
    </div>
  {:else}
    <div class="media ali list-group-item list-group-item-action  clique" on:click={() => changeCart(subCategories)}>
      <Management/>
      <div class="media-body"  >
        <h4 class="media-heading">{subCategories.name}</h4>
      </div>
    </div>
  {/if}
{/each}

I want to change this line :

{#if ($cart.indexOf(subCategories.name) > -1)}

The goal is to check if an object is already in $cart like the script part already do but I don't know how to make the modification for the if statement in my html

Answer 1

I found the solution : this is what I've done :

Script part :

function changeCart(subCat)
    {
        let addedCat = {id: subCat._id,name: subCat.name, name_categorie: subCat.name_categorie}

        let exist = checkIfExist(subCat) 

        if(exist >= 0)
        {
                $cart = $cart.filter(item => item.id !== subCat._id)
        }
        else
        {
            $cart = [...$cart, addedCat]
        }

        console.log($cart)

    }

    function checkIfExist(cat)
    {
        for( let i = 0; i < $cart.length; i++)
        {
            if($cart[i].id == cat._id){
                return i
            }
        }
        return -1
    }

and the html part :

{#key $cart}
                            {#each subCategories as subCategory}
                                
                            <div class={`media ali list-group-item list-group-item-action ${checkIfExist(subCategory) >= 0 ? "selected" :""} clique`} on:click={() => {changeCart(subCategory)}}>
                                <Management/>
                                <div class="media-body">
                                    <h4 class="media-heading">{subCategory.name}</h4>
                                </div>
                            </div>
                            {/each}
                            {/key}