CODEWITHSUNDEEP
sveltekit
Romain Straet
Romain Straet

Reputation: 49

Sveltekit is not reactive when navigating through slug page

When I navigate through [slug] pages, the content does not update although +page.server.ts is correctly called.

I understand this is an expected behavior and that the solution is to use "$:" to listen to change and reevaluate the statement, but this does not work.

Any idea ?

+page.server.ts

import { getPage } from '$lib/services/pages';
export async function load({params}) {
    const page = await getPage(params.slug)
    return { page };
}

+page.svelte

<script>
    import Editor from '$lib/editor/index.svelte'
    export let data;
    // This is the solution found on similar question but this does not work
    $: content = data.page.text
    // But this works 
    $: console.log(data.page.text)

</script>

<Editor {content}></Editor>

Note: Navigation is made with simple tag on +layout.svelte

EDIT: the Editor component is actually a copy of this tiptap svelte example except the content is passed through the parent.

Thank you

Upvotes: 0

Views: 1082

Answers (2)

Mike Robinson
Mike Robinson

Reputation: 21

I'm no expert, but I recently had a similar/same problem. The trick seems to be to add parentheses. Like this:

 $: (content = data.page.text)

Upvotes: 2

Stephane Vanraes
Stephane Vanraes

Reputation: 16451

Likely you have a similar error in the Editor component. Some things you can try

add the following, it will make a dump of your text on screen and should change

<pre>{JSON.stringify(content, null, 2)}</pre>

force the Editor component to remount by using #key, this likely works but it might be better to fix the component itself depending on your needs.

{#key content}
  <Editor {content} />
{/key}

Upvotes: 1

Related Questions