如何使 if 语句重新渲染组件苗条

Question

这是我的脚本：

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)

}

这是我的 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}

我想更改此行：

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

目标是检查对象是否已经在 $cart 中，就像脚本部分已经做的那样，但我不知道如何修改 html[=13= 中的 if 语句]

Answer 1

您可以简单地使用 class:<name> Svelte directive. To add better readability, you could also make use of the new-ish @const 块指令：

{#each subCategories as subCategory}
  {@const selected = $cart.some(element => element.id === subCategory.id)}
  <div class:selected class="media ali list-group-item list-group-item-action clique" on:click={() => changeCart(subCategory)}>
    <Management/>
    <div class="media-body"  >
      <h4 class="media-heading">{subCategory.name}</h4>
    </div>
  </div>
{/each}

注意：还将当前迭代值的名称更改为subCategory（不要将迭代器命名为与被迭代器相同的名称）。

Answer 2

我找到了解决方案：这就是我所做的：

脚本部分：

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
    }

和 html 部分：

{#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}

如何使 if 语句重新渲染组件苗条

How to make if statement rerender component svelte

javascript

components

if-statement

store

svelte