Estoy tratando de escribir una aplicación Pokedex SvelteKit (como un tutorial de James Q Quick). Cuando guardo mi archivo index.svelte , dice el error en el título de esta pregunta.
Mi código index.svelte es el siguiente:
<script> import Nav from '../components/nav.svelte' import {pokemon} from '../stores/pokestore' import PokemanCard from "../components/pokemanCard.svelte" let searchTerm = ""; let filtered = []; $: { // Reacts to any data that changes ($: {what will happen when data changes}) if (searchTerm !== pokemon.searchTerm) { searchTerm = pokemon.searchTerm; filtered = filtered(pokemon.pokemons, searchTerm); } } </script> <svelte:head> <title>Svelte Kit Pokedex</title> </svelte:head> <!-- All HTML Work --> <h1 class="text-4xl text-center m-8 uppercase">SvelteKit Pokedex</h1> <input type="text" class="w-full rounded-md text-lg p-4 border-2 border-gray-200" placeholder="Search Pokemon" bind:value={searchTerm}> <style> </style> <div class="py-4 grid gap-4 md:grid-cols-2 grid-cols-1"> {#each $filtered as pokeman} <PokemanCard pokeman={pokeman} /> {/each} </div>¿Cómo puedo solucionar esto?
Gracias :)
filtered es solo una matriz, no una tienda esbelta (o una entidad que expone un método subsribe() ), por lo que no puede usar la abreviatura $ para suscribirse. Simplemente itérelo como una matriz (sin el $ ).
{#each filtered as pokeman} ... {/each} ¿Pero es pokemon una tienda? si es así, deberá suscribirse en la declaración reactiva para ver los cambios.
<script> import Nav from '../components/nav.svelte' import {pokemon} from '../stores/pokestore' import PokemanCard from "../components/pokemanCard.svelte" let searchTerm = ""; let filtered = []; $: if (searchTerm !== $pokemon.searchTerm) { searchTerm = $pokemon.searchTerm; filtered = filtered($pokemon.pokemons, searchTerm); // *Note: I'm not sure where this 'filtered()' method is coming from but it will conflict with your `filtered` array variable. } </script> <svelte:head> <title>Svelte Kit Pokedex</title> </svelte:head> <!-- All HTML Work --> <h1 class="text-4xl text-center m-8 uppercase">SvelteKit Pokedex</h1> <input type="text" class="w-full rounded-md text-lg p-4 border-2 border-gray-200" placeholder="Search Pokemon" bind:value={searchTerm}> <style> </style> <div class="py-4 grid gap-4 md:grid-cols-2 grid-cols-1"> {#each filtered as pokeman} <PokemanCard pokeman={pokeman} /> {/each} </div> Alternativamente, podría hacer uso de una tienda derivada esbelta para su colección filtered , en cuyo caso usaría la abreviatura $ al iterarlo
<script> import { derived } from 'svelte/store'; import { pokemon } from './stores.js'; const filtered = derived( pokemon, $pokemon => $pokemon.pokemons.filter(p => /* your filter logic */ ) ); </script> <div class="py-4 grid gap-4 md:grid-cols-2 grid-cols-1"> {#each $filtered as pokeman} <PokemanCard pokeman={pokeman} /> {/each} </div>