在Svelte的#each块中更新并显示计数器变量值的问题

你的问题核心在于Svelte的响应式绑定特性：模板里的{counter}始终引用同一个变量，当所有迭代的increment()执行完毕后，counter已经变成最终值，DOM更新时所有元素都会读取这个最新值，所以全部显示6。而控制台日志是同步执行的，所以能输出预期的递增过程。

下面给你几个可行的解决思路：

方法1：在迭代中声明局部变量捕获当前值 #

利用Svelte在#each块中支持局部变量的特性，每次迭代时把当前counter的值存到局部变量里，后续counter变化不会影响这个局部变量：

<script>
    let arr = ["a","b","c","d","e","f"];
    let counter = 0
    let increment = ()=>{
        counter++
        console.log(counter)
        return ""
    }
</script>

{#each arr as item}
    {let currentCount = counter}
    <p>
        {item} -> {currentCount}
    </p>
    {increment()}
{/each}

方法2：让递增函数返回当前值 #

修改递增逻辑，让函数直接返回当前需要显示的计数，模板里直接使用返回值，不用依赖对counter的引用：

<script>
    let arr = ["a","b","c","d","e","f"];
    let counter = 0
    
    // 先获取当前值再递增，返回初始值（适合从0开始显示）
    let getCountAndIncrement = () => {
        const current = counter;
        counter++;
        console.log(counter);
        return current;
    }
</script>

{#each arr as item}
<p>
    {item} -> {getCountAndIncrement()}
</p>
{/each}

如果需要从1开始显示，调整为先递增再返回：

let getCountAndIncrement = () => {
    counter++;
    console.log(counter);
    return counter;
}

方法3：用数组存储每个项的对应计数 #

如果#each块内有复杂的条件逻辑（比如#if块需要重置/增减计数器），可以维护一个数组来记录每个迭代对应的计数，动态更新这个数组：

<script>
    let arr = ["a","b","c","d","e","f"];
    let counter = 0;
    let itemCounts = [];

    // 初始化计数数组
    const initCounts = () => {
        counter = 0;
        itemCounts = arr.map(() => {
            counter++;
            return counter;
        });
    };

    // 示例：重置指定项的计数
    const resetCountForIndex = (index) => {
        itemCounts[index] = 0;
    };

    initCounts();
</script>

{#each arr as item, i}
<p>
    {item} -> {itemCounts[i]}
    <button on:click={() => resetCountForIndex(i)}>重置当前计数</button>
</p>
{/each}

这个方法适合需要动态修改单个项计数的场景，完全不受#if块的逻辑影响。

内容的提问来源于stack exchange，提问作者ashishdhngr