Basic SvelteKit / API routes / POST handlers: tutorial does not function as written.

[danloomer]

https://svelte.dev/tutorial/kit/post-handlers

This tutorial does not seem to be up to date with the current framework behavior.

There are a couple incongruencies:

1. Following the tutorial you end up with an input that creates todos on enter keydown, but the UI does not update until you refresh.
2. Pressing the solve button adds a $bindable() rune to the data prop, but this is not mentioned anywhere in the tutorial, and does not actually seem to be necessary or make a difference.

I think the issue is that the example is trying to deeply mutate the data prop, but it's not a reactive prop, so it does not detect the change. Changing data update line from data.todos to a full reassignment of data fixes the example.

Screen.Recording.2024-11-03.at.2.58.37.PM.mov

[danloomer]

The issue continues on the next page, because it builds on the previous non-functioning code:
https://svelte.dev/tutorial/kit/other-handlers

Need to refresh to see added/deleted todos.

I also noticed that the arial-abel is a bit odd on the delete button: Mark as complete

Solve does not work here either.

[KamBha]

I was able to make this work by creating a $state variable:-

let results = $state(data.todos);

And then using results instead of data.todos. Is the standard/correct way of doing things?

[lts20050703]

Seems like the tutorial was updated!

https://svelte.dev/tutorial/kit/post-handlers