CODEWITHSUNDEEP
svelte
AJP
AJP

Reputation: 28543

Svelte not updating child component

I have an app with a child component. The child component does not update when a variable in the parent changes. The code works fine in the Svelte "REPL". I'm wondering if anyone has any ideas to help debug this.

Using Svelte version 3.29.0

Project structure: App.svelte

<script>
    import Nested from "./Nested.svelte"

    const mouse_move = v => () => {
        selected_index = v
        console.log(selected_index)
    }

    let selected_index = 1;
</script>
{selected_index}
<Nested name={selected_index} mouseenter={mouse_move("here")} mouseleave={mouse_move("gone")}/>

Nested.svelte

<script>
    export let name = "Ready";
    export let mouseenter = () => {};
    export let mouseleave = () => {};
</script>

<h1 on:mouseenter={mouseenter} on:mouseleave={mouseleave}>Hello {name}!</h1>

Hovering over the h1 text causes selected_index to change from 1 to here. That is rendered by {selected_index} but the Nested element remains unchanged on my localhost version but changes fine in the Svelte "REPL".

Any thoughts on what / how to debug would be appreciated.

** edit **

When I built it for production and serve locally it works fine. Tried the following things and none of them worked:

Upvotes: 4

Views: 3997

Answers (1)

Paa-Kofi Aidoo
Paa-Kofi Aidoo

Reputation: 53

bind the name

<Nested bind:name={selected_index} mouseenter={mouse_move("here")} mouseleave={mouse_move("gone")}/>

Upvotes: 2

Related Questions