How to trigger Svelte component update when imported variable changes

Question

Svelte allows conditional rendering based on the value of a variable in component scope. However, if a variable is imported, Svelte will not trigger an update upon the value change.

What is the proper way to trigger an update in this case ?

Example:

App.svelte

<script>
    import {flag, setFlag} from './flag.js'
</script>

{#if flag}
    <h1>Flag present</h1>
{/if}

<button on:click={e =>setFlag()}>Toggle</button>

flag.js

export let flag = false
export function setFlag() {
    flag = true;
}

When clicking the button, the variable in flag.js changes, but the component does not re-render with the new value.

Stephane Vanraes · Accepted Answer · 2022-07-13 10:38:49Z

5

You have to use stores to do this. The code would like like this: flag.js

import { writable } from 'svelte/store';
export const flag = writable(false);
export function setFlag() {
 flag.set(true);
}

App.svelte

<script>
    import {flag, setFlag} from './flag.js'
</script>

{#if $flag}
    <h1>Flag present</h1>
{/if}

<button on:click={e =>setFlag()}>Toggle</button>

Note the use of $ to mark that you want the value of the store and not the store itself.

This is with using your code where you have this setFlag function, you could also set the store directly:

<button on:click={() => $flag = true}>Toggle</button>

answered Jul 13, 2022 at 10:38

Stephane Vanraes

16.5k3 gold badges34 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zyrup Over a year ago

It was quite confusing for me but if you use an object in writable() you don't need to use set etc. functions

mtx Over a year ago

this is the only pain in svelte particularly when flag.js is a class

Collectives™ on Stack Overflow

How to trigger Svelte component update when imported variable changes

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related