Estoy tratando de crear dinámicamente 5 divs con un li usando {each} en Svelte.
El siguiente código representa los divs y lis, pero ejecuta el cálculo solo una vez y, por lo tanto, da el mismo resultado en cada div/li:
let price; let numberOfYears = 5; function calculate() { price = price * 1.04; } <form action=""> <label for="price">Price: </label> <input type="number" bind:value={price} id="price" name="price" /> <button class="calculate" on:click={calculate}>Calculate</button> {#each { length: numberOfYears } as _, i} <div style="float: left; width: 19%; border: 1px solid #000000;"> <h2>Year 1</h2> {calculate()} <ul> <li>{price}</li> </ul> </div> {/each}Lo que busco son 5 años con precio incremental (precio * 1.04)
Svelte está destinado a ser declarativo, por lo que no debe modificar el estado en {#each} , sino que su matriz de datos debe contener los resultados completamente calculados (o al menos ser independiente de un estado mutable compartido).
Por lo tanto, declare una matriz, por ejemplo, prices y configúrela en calculate() , luego use sus elementos en each .
Por ejemplo, algo como esto:
let prices = []; function calculate() { prices = new Array(numberOfYears).fill(price).map((p, i) => p * 1.04**i) } También puede usar una instrucción reactiva ( $: para calcular automáticamente los valores siempre que cambie una variable utilizada ( price / numberOfYears );
let price = null; let numberOfYears = 5; $: prices = price == null ? [] : new Array(numberOfYears).fill(price).map((p, i) => p * 1.04**i);Un enfoque alternativo sería usar matemáticas antiguas para calcular sus tarifas.
<script> let numberOfYears = 5; let price = 1; let rate = 1.04; $: calculate = year => price*Math.pow(rate,year); </script> <input type="number" bind:value={numberOfYears} > <input type="number" bind:value={price} > <input type="number" bind:value={rate} step=".01"> {#each { length: numberOfYears } as _, i} <div> <h2>Year {i}</h2> <p>{calculate(i)}</p> </div> {/each} aquí la función de calculate es reactiva, por lo que generará una nueva función cada vez que cambie el precio o la tasa. También puedes escribirlo directamente entre corchetes o usar {@const} para alinearlo más:
{#each { length: numberOfYears } as _, i} {@const intrest = price*Math.pow(rate,i)} <div> <h2>Year {i}</h2> <!-- with @const --> <p>{intrest}</p> <!-- formula directly in the markup --> <p>{price*Math.pow(rate,i)}</p> </div> {/each}tenga en cuenta que mis matemáticas pueden estar un poco mal, asegúrese de usar la fórmula correcta