• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

197
Vistas
Bucle en esbelto basado en prop

Estaba tratando de recorrer e inicializar un diccionario basado en un accesorio en esbelto, pero hasta ahora parece imposible. Tiene que haber una manera de hacer esto, ¿verdad?

 <script> export let max; let map = {}; $: if(max != undefined){ for(var i=0; i<max; i++){ if(i<5) { map["id_"+i] = 1; } else { map["id_"+i] = -1; } } } </script> <p>{max}</p>
almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

No estoy seguro de cuál era exactamente el problema de su versión (cambiaría a $: if(max) {...} ) (resulta que estaba usando var en lugar de let ) pero si coloca la funcionalidad en la función onMount funciona >> REPL

App.esbelta
 <script> import Component from './Component.svelte' </script> <Component max={20}/>
Componente.esbelto
 <script> import {onMount} from 'svelte' export let max; let map = {}; onMount(() => { for(var i=0; i<max; i++){ if(i<5) { map["id_"+i] = 1; } else { map["id_"+i] = -1; } } console.log(map) }) </script> <p>{max}</p>
almost 3 years ago · Juan Pablo Isaza Denunciar

0

La versión de Corrl funciona, pero tiene una advertencia importante: su matriz no se actualizará si cambia el accesorio máximo sobre la marcha, porque el componente no se destruirá ni se volverá a montar y, por lo tanto, su rutina de matriz no se ejecutará de nuevo.

Tal vez esta sea su intención, o tal vez no lo sea.

Una versión reactiva mantendrá la matriz actualizada. Sin embargo, cuando se trata de declaraciones reactivas, mi consejo siempre es mantener estas declaraciones lo más simples posible.

Una solución más limpia a su problema sería mover su rutina de creación de matrices a una función simple que acepte el valor max como entrada y devuelva la matriz inicializada:

 function makeMap(max) { const map = {} for(var i=0; i<max; i++){ if (i<5) { map["id_"+i] = 1 } else { map["id_"+i] = -1 } } return map }

Entonces su código reactivo se convierte en muy simple:

 $: map = makeMap(max)

que respeta la regla fundamental de asignación reactiva con la variable reactiva ( map ) en el lado izquierdo y la dependencia ( max ) en el lado derecho.

Aquí hay un REPL que demuestra la diferencia entre actualizar su matriz a través de una declaración reactiva y inicializarla a través onMount . Eche un vistazo a la consola mientras cambia el apoyo max pasado al componente haciendo clic en el botón + .

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda