我正在try 使用Svelte中的{each}动态创建一个5个div,其中包含一个li.

下面的代码呈现div和li,但只运行一次计算,因此在每个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}

我想要的是5年的增量价格(价格*1.04)

推荐答案

Svelte是声明性的,因此您不应该在{#each}中修改状态,相反,您的数据数组应该包含完全计算的结果(或者至少独立于共享的可变状态).

因此,声明一个数组,例如prices,并在calculate()中设置它,然后在each中使用它的项.

E、 g.类似这样:

let prices = [];
function calculate() {
    prices = new Array(numberOfYears).fill(price).map((p, i) => p * 1.04**i)
}

REPL example

您还可以使用react 语句($:)在所用变量(price/numberOfYears)发生变化时自动计算值;

let price = null;
let numberOfYears = 5;

$: prices = price == null ?
   [] : new Array(numberOfYears).fill(price).map((p, i) => p * 1.04**i);

REPL example

Javascript相关问答推荐

foreach循环中的Typescript字符串索引

我不知道为什么我的JavaScript没有验证我的表单

使用json文件字符串来enum显示类型字符串无法按照计算的enum成员值的要求分配给类型号

使用useup时,React-Redux无法找到Redux上下文值

使用下表中所示的值初始化一个二维数组

如何用拉威尔惯性Vue依赖下拉?

当id匹配时对属性值求和并使用JavaScript返回结果

是什么导致了这种奇怪的水平间距错误(?)当通过JavaScript将列表项元素追加到无序列表时,是否在按钮之间?

如何使用JavaScript拆分带空格的单词

在我的index.html页面上找不到我的Java脚本条形图

Reaction-SWR-无更新组件

Phaserjs-创建带有层纹理的精灵层以自定义外观

在Vercel中部署Next.js项目时获取`ReferenceError:未定义文档`

postman 预请求中的hmac/sha256内标识-从js示例转换

如何在独立的Angular 应用程序中添加Lucide-Angel?

我的NavLink活动类在REACT-ROUTER-V6中出现问题

更新文本区域行号

将字体样式应用于material -UI条形图图例

使用Java脚本替换字符串中的小文本格式hashtag

KeyboardEvent:检测到键具有打印的表示形式