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.
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>