CODEWITHSUNDEEP
javascriptsveltesvelte-3svelte-componentsvelte-store
gengns
gengns

Reputation: 1653

How to order Keyed each blocks in Svelte

I've created a store with a list of users and I want to order using different parameters.

store.js

export const users = writable([
  {
    "id": 11,
    "name": "Kepler",
  },
  {
    "id": 13,
    "name": "Planck",
  },
// more users going in here

To do so, I'm using orderBy from Lodash.

Case A. If I don't use a keyed each blocks then orderBy works as expected.

App.svelte

{#each _.orderBy($users, [param], [order]) as user}
  <div>{user.id} {user.name}</div>
{/each}

But then if I remove or do some specific changes to my store, the updates don't work properly. A better explanation of what's happening in the Svelte's docs.

Case B. If I use a keyed each block then updates work as expected but not orderBy.

App.svelte

{#each _.orderBy($users, [param], [order]) as user (user.id)}
    <div>{user.id} {user.name}</div>
{/each}

Here a Real Example on Svelte REPL.

Visit link above and click on buttons to switch between ascending or descending order.

Probably I'm missing something about keyed each blocks but would like to figure out how Svelte experts solve this.

Upvotes: 1

Views: 2942

Answers (1)

dummdidumm
dummdidumm

Reputation: 5436

This was a bug in version 3.38. Version 3.39 was just released which fixes this issue.

Upvotes: 1

Related Questions