Editar: es un error https://github.com/sveltejs/svelte/pull/7043
Teniendo en cuenta el siguiente ejemplo , uno esperaría que 'bar' se representara bajo la segunda regla horizontal siempre que foo sea false y bar[0] sea true .
<script> let foo = true let bar = [false]; </script> <button on:click={() => foo = !foo}> Toggle foo </button> <button on:click={() => bar[0] = !bar[0]}> Toggle bar </button> <hr> {@html `foo: ${foo}, bar: ${bar.every(x => x)}`} <hr> {#if foo} foo! {:else if bar.every(x => x)} bar! {/if}Sin embargo, si se ejecutan los siguientes pasos, la reactividad aparentemente se rompe:
foo en truebar[0] en truefoo en false No se representa nada bajo la regla horizontal aunque se cumpla la condición de bloque else if . Este no es el caso si la condición else if es simplemente bar[0] , por lo que parece que el uso de una función es la causa de que no se evalúe. Comportamiento similar cuando bar es true antes de que se cambie foo y false después de que foo se cambie de nuevo, inesperadamente 'bar' se representa en la parte inferior.
El mismo efecto se puede observar cuando foo se cambia entre null y [] con la condición else if siendo Array.isArray(bar) .
¿Es esto un error o me estoy perdiendo algo?
No es realmente un error, es un comportamiento esperado en su escenario, cuando cambió foo to true , luego bar to true ahora la barra está configurada y cuando cambió foo to false nuevamente, ¡la bar didn't change si lo piensa para activar la reactividad!
la solución para eso es activarlo usted mismo una vez que cambie cualquiera de los valores:
{#key foo || bar} {#if foo} foo! {:else if bar.every(x => x)} bar! {/if} {/key}Aquí hay una réplica de trabajo