В основном я пытаюсь создать мишень для крикета с помощью AlpineJs. Это будет таблица с именами игроков в заголовке и очками для некоторых определяющих сегментов в теле.
Итак, я объявил некоторые Alpine.data:
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 = "20", и в цикле игрока мне нужно получить "player.touched20", поэтому во второй итерации у меня есть segment = "19", и мне нужно получить "player. коснулся 19". Будет одинаковым для разных сегментов.
Мой результат с x-text="player.touched${segment}
" возвращает строку, но не значение моих альпийских данных.
Итак, мой 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>
Если у кого-то есть идея или решение, это было бы очень большим подспорьем. Спасибо
Используйте синтаксис строкового литерала только для части доступа к динамическим атрибутам:
<td x-text = "player[`touched${segment}`]"></td>
Большое спасибо, ! Я представлял, что это так просто :)