AlpineJs:循环中的循环-如何在第二个循环中使用第一个变量

Question

基本上，我正在尝试用AlpineJs生成一个板球飞镖板。这将是一张表格，上面写着玩家的名字，以及身体中一些决定性部分的分数。

所以我申报了一些Alpine.datas:

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

所以，foreach段，我需要一行，foreach播放器需要一列。但我不知道如何使用第一个循环变量"segment"来定义每个玩家对应该段的分数。在第一段迭代中；20〃；在玩家循环中，我需要得到"；player.touched20"；，所以在第二次迭代中；19〃；我需要得到"；玩家。触摸19"；。对于不同的细分市场将是相同的。我的x-text="；CCD_ 1"；返回一个字符串，但不返回我的alpine数据的值。

所以，这是我的html:

<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>

如果有人有一个想法或解决方案，那将是一个非常大的帮助。感谢

Answer 1

仅对动态属性访问部分使用字符串文本语法：

<td x-text="player[`touched${segment}`]"></td>