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?
2 respuestas
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
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
.
Preguntas vinculadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.