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

Question

基本上我正在尝试使用 AlpineJs 生成板球飞镖。它将是一个 table，头部是球员的名字，body 中一些决定性部分的得分。

所以我声明了一些 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,
                },
            ],
        }));

所以，对于每个片段，我需要一行，对于每个玩家，我需要一列。但是我不知道如何使用第一个循环变量'segment'来定义这个段对应的每个玩家的分数。在第一次迭代中，我有变量 segment = “20”，在播放器循环中我需要得到“player.touched20”，所以在第二次迭代中我有 segment = “19”，我需要得到“player.touched20”。感动19”。对于不同的细分市场将是相同的。我的结果是 x-text="player.touched${segment}" returns 一个字符串，但不是我的高山数据的值。

所以，这是我的 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>

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

AlpineJs: Loop in a a loop - How to use the first variable in the second loop?

loops

alpine.js