基本上我正在嘗試使用 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'來定義這個segment對應的每個玩家的得分。在第一次迭代中,我有變數段 =“20”,在播放器回圈中我需要得到“player.touched20”,所以在第二次迭代中我有段 =“19”,我需要得到“player.touched20”。感動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>
如果有人有想法或解決方案,那將是一個非常大的幫助。謝謝
uj5u.com熱心網友回復:
僅對動態屬性訪問部分使用字串文字語法:
<td x-text="player[`touched${segment}`]"></td>
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/445796.html
