Svelte permite la representación condicional basada en el valor de una variable en el alcance del componente. Sin embargo, si se importa una variable, Svelte no activará una actualización al cambiar el valor.
¿Cuál es la forma correcta de activar una actualización en este caso?
Ejemplo:
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; } Al hacer clic en el botón, la variable en flag.js cambia, pero el componente no se vuelve a representar con el nuevo valor.
Tienes que usar las tiendas para hacer esto. El código sería así: flag.js
import { writable } from 'svelte/store'; export const flag = writable(false); export function setFlag() { flag.set(true); }App.esbelta
<script> import {flag, setFlag} from './flag.js' </script> {#if $flag} <h1>Flag present</h1> {/if} <button on:click={e =>setFlag()}>Toggle</button> Tenga en cuenta el uso de $ para marcar que desea el valor de la tienda y no la tienda en sí.
Esto es con el uso de su código donde tiene esta función setFlag , también puede configurar la tienda directamente:
<button on:click={() => $flag = true}>Toggle</button>