Esto es lo que tengo en el html de mi página:
{#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}para la parte js esto es lo que tengo:
import { writable } from "svelte/store"; let cart = writable([]); function changeCart(subCat) { $cart.push(subCat); console.log($cart); }Pero el problema es que la condición if no recarga/renderiza en otro momento y el cambio de caso funciona solo después de volver al componente anterior y volver a este componente en otro momento.
Debido a que la reactividad de Svelte se activa mediante asignaciones, el uso de métodos de matriz como empujar y empalmar no generará actualizaciones automáticamente.
Fuente: https://svelte.dev/tutorial/updating-arrays-and-objects
Solución:
import { writable } from 'svelte/store'; let cart = writable([]) function changeCart(subCat) { // $cart.push(subCat) $cart = [...$cart, subCat] console.log($cart) }