Alpine.js | не работает x-for
Компоненты из темплейта просто не рендерятся, в чем может быть проблема?
<template x-for="readyConf in window.READY_CONFIGS">
<div class="one-ready-configuration"
x-data="{period: '1', pricePerMonth: readyConf.pricePerMonth}">
<div class="__top-section">
<div class="__ico"></div>
<div class="cpu-name" x-text="readyConf.cpuName"></div>
<div class="cpu-chars" x-text="readyConf.cpuChars"></div>
<div></div>
<div class="ram" x-text="readyConf.ram"></div>
<div></div>
<div class="drive" x-text="readyConf.drive"></div>
<div></div>
<div class="__price" x-text="pricePerMonth.slice(' ')[0] * period"></div>
</div>
<div class="__bottom-section">
<div>
<span style="font-family: 'Montserrat Bold'; font-size: 1.8vw">Период</span>
<select class="__option-choose-period" x-model="period">
<option value="1" selected>1 месяц</option>
<option value="2">2 месяца</option>
<option value="3">3 месяца</option>
</select>
</div>
<div class="ready-conf__buy-btn">
<span>Заказать</span>
</div>
</div>
</div>
</template>
window.READY_CONFIGS = [
{
'cpuName': 'Intel E3-1230',
'cpuChars': '4 x 3.2 GHz',
'ram': '8Gb DDR3',
'drive': '1Tb HDD',
'pricePerMonth': '2120 руб/мес',
},
{
'cpuName': 'Intel E3-1270',
'cpuChars': '4 x 3.4 GHz',
'ram': '8Gb DDR3',
'drive': '1Tb HDD',
'pricePerMonth': '2320 руб/мес',
},
{
'cpuName': 'Intel E5-2630v2',
'cpuChars': '6 x 2.6 GHz',
'ram': '16Gb DDR3',
'drive': '1Tb HDD',
'pricePerMonth': '4080 руб/мес',
},
{
'cpuName': 'Intel Core i7-11700K',
'cpuChars': '8 x 3.6 GHz',
'ram': '16Gb DDR4',
'drive': '1Tb HDD',
'pricePerMonth': '5450 руб/мес',
},
{
'cpuName': 'Intel Core i7-11700K',
'cpuChars': '8 x 3.6 GHz',
'ram': '16Gb DDR4',
'drive': '800Gb SSD',
'pricePerMonth': '7450 руб/мес',
},
]