AlpineJS嵌套循环问题：如何在第二层循环中使用第一层循环的变量？

我完全懂你的困扰——你想在循环里动态获取玩家对应飞镖段的得分，但直接用模板字符串拼接属性名只会输出字符串，而不是实际的属性值。这其实是JavaScript对象属性访问的基础问题，咱们用方括号语法就能轻松解决。

直接修复方案 #

你只需要把x-text里的表达式改成方括号访问形式就行，因为方括号允许我们用动态字符串作为属性名：

<div x-data="data">
  <table>
    <thead>
      <tr>
        <th>///</th>
        <template x-for="player in players">
          <th x-text="player.name"></th>
        </template>
      </tr>
    </thead>
    <tbody>
      <template x-for="segment in segments">
        <tr>
          <td x-text="segment"></td>
          <template x-for="player in players">
            <!-- 改用方括号语法动态访问属性 -->
            <td x-text="player[`touched${segment}`]"></td>
          </template>
        </tr>
      </template>
    </tbody>
  </table>
</div>

为什么原来的写法不行？ #

x-text="player.touched${segment}" 这段代码只是把player.touched和segment拼接成了一个字符串（比如"player.touched20"），并没有真正去访问player对象的touched20属性。而方括号语法player[属性名字符串]才是JavaScript中动态访问对象属性的正确姿势。

更优雅的数据结构优化 #

另外，我建议你调整下数据结构，把每个玩家的得分改成嵌套对象，这样代码会更清晰，后续扩展也更方便：

Alpine.data('data', () => ({
  segments: ['20', '19', '18'],
  players: [
    { name: 'Yann', touched: { '20': 0, '19': 0, '18': 0 } },
    { name: 'Morgan', touched: { '20': 0, '19': 0, '18': 0 } },
  ],
}));

对应的HTML也能简化成：

<td x-text="player.touched[segment]"></td>

这种结构的好处是，以后新增飞镖段（比如'17'），你只需要在segments数组里添加，再给每个玩家的touched对象加个新键值对就行，不用再给每个玩家单独加touched17这类属性，维护起来高效很多。

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