AlpineJS模板条件递增计数器为何仅显示最终值且未从1起始

问题原因解析 #

1. 所有条目显示最终counter值 #

你在filter回调里直接修改counter的方式完全错误。AlpineJS渲染模板时，会先执行完所有filter逻辑，再渲染x-for循环内容。两个filter会先把所有符合条件（奇数）的项筛选出来，同时把counter累加完毕，等开始渲染条目时，counter已经是最终值，所以所有条目都会显示这个数值。

2. 计数器不从1开始 #

初始counter设为1，但第一个符合条件的项进入filter回调时，会先执行counter++，此时counter变成2，渲染该条目时自然显示2，看不到以1开头的计数。

3. 最终counter未停在9 #

数两个数组里的奇数总数：

• data1中的奇数：33、13、45、69 → 共4个
• data2中的奇数：13、99、13、97、87 → 共5个
  总共9个奇数。初始counter为1，每遇到一个奇数就执行一次counter++，最终counter会变成1+9=10，所以不会停在9。

正确实现方式 #

不要在filter里修改响应式变量，通过计算过滤后的列表，再用循环索引生成递增序号即可。以下两种方案任选：

方案1：合并列表统一计数 #

如果允许合并渲染两个列表，直接合并过滤后的奇数项，用索引+1生成连续序号：

<script src="https://unpkg.com/alpinejs@3.13.2/dist/cdn.min.js"></script>
<div x-data="{
  data1: [33,34,56,78,13,45,69,32,76],
  data2: [13,68,99,13,88,97,32,12,87],
  get filteredItems() {
    return [...this.data1.filter(x => x%2), ...this.data2.filter(x => x%2)];
  }
}">
  <template x-for="(item, index) in filteredItems" :key="index">
    <div>
      <span x-text="item"></span>:<span x-text="index + 1"></span>
    </div>
  </template>
</div>

方案2：分列表保持连续计数 #

如果需要分开渲染两个列表但计数连续，先统计第一个列表的奇数数量，再在第二个列表的计数中累加该数值：

<script src="https://unpkg.com/alpinejs@3.13.2/dist/cdn.min.js"></script>
<div x-data="{
  data1: [33,34,56,78,13,45,69,32,76],
  data2: [13,68,99,13,88,97,32,12,87],
  get data1OddCount() {
    return this.data1.filter(x => x%2).length;
  }
}">
  <template x-for="(item, index) in data1.filter(x => x%2)" :key="index">
    <div>
      <span x-text="item"></span>:<span x-text="index + 1"></span>
    </div>
  </template>
  <template x-for="(item, index) in data2.filter(x => x%2)" :key="index">
    <div>
      <span x-text="item"></span>:<span x-text="this.data1OddCount + index + 1"></span>
    </div>
  </template>
</div>

这两种方案都能实现条目显示正确的递增序号，计数从1开始，最终停在9。

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