Error de aplicación esbelta: falla la conversión de cadena a booleana en la vista

Question

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?

javascript svelte svelte-3

1

Razvan Zamfir 21 jul. 2020 a las 15:04

Answer 1

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

Answer 2

Creo que el problema es que el Boolean () crea un nuevo objeto, al que no se puede vincular, porque nunca más se hace referencia a él. Puede enlazar directamente a su matriz de valores en countries, utilizando este código:

{#each countries as c, index}   
    <tr>
        <td>{c.name}</td>
        <td class="text-right"><Switch bind:checked={countries[index].status} /></td>
    </tr>
{/each}

Lo que ha cambiado es que ahora usa el parámetro index del bucle #each para unirse a la variable de la matriz de países. Tenga en cuenta que para que esto funcione correctamente, debe cambiar los valores de estado a true o false. De lo contrario, seguirá funcionando, pero el valor inicial siempre será true.

0

Razvan Zamfir 21 jul. 2020 a las 12:59

Nuevas preguntas

javascript

Error de aplicación esbelta: falla la conversión de cadena a booleana en la vista

2 respuestas

Preguntas vinculadas