En una aplicación Svelte, tengo esta variedad de países:

let countries = [
    {
        name:"Alegeria",
        status: "1"
    },
    {
        name:"Bulgaria",
        status :"0"
    }
]

Tenga en cuenta que la propiedad status es una cadena. Repito la matriz de esta manera:

{#if countries.length > 0}
<table class="table">
    <thead>
        <tr>
            <th>Country</th>
            <th class="text-right">Status</th>
        </tr>
    </thead>
    <tbody>
        {#each countries as c}  
        <tr>
            <td>{c.name}</td>
            <td class="text-right"><Switch bind:checked={Boolean(Number(c.status))} /></td>
        </tr>
    {/each}
    </tbody>
</table>
{:else}
<p class="alert alert-danger">No countries found</p>
{/if}

Como puede ver, trato de convertir el valor de la propiedad status a un valor booleano usando Boolean(Number(c.status)).

En lugar de la conversión deseada, aparece el error: Can only bind to an identifier (e.g. foo ) or a member expression como REPL muestra.

¿Qué estoy haciendo mal?

1
Razvan Zamfir 21 jul. 2020 a las 15:04

2 respuestas

La mejor respuesta

Como dice en el error, solo puede bind a un identificador o expresión de miembro, es decir, una variable.

Esto se debe a que un bind es una cosa bidireccional, y si le has aplicado Boolean(Number(()), cuando alguien cambia esa entrada, entonces Svelte no sabe cómo deshacer esas funciones para 'guardar' los datos vuelven a esa variable a la que está obligado.

Si no puede cambiar las variables de estado para que sean booleanas (mejor solución, como lo sugieren otras respuestas), debe realizar manualmente esta actualización bidireccional. Suelta el bind, solo tienes checked={Boolean(Number(c.status))}, y maneja el evento change de la entrada para convertir de verdadero / falso de nuevo a "1" o "0", y guárdalo en el estado.

Uso:

function handleClick(country) {
    countries.find(c => c.name == country.name).status = (country.status == "1") ? "0" :"1"
}

Y

<Switch checked={Boolean(Number(c.status))} on:change={() => handleClick(c)}/>

Véalo trabajando en esta respuesta

1
Luke Storry 21 jul. 2020 a las 13:26