this is my all of code: in x-if template i can not use ">" or "<" sign and in the x-data also can not have a function and a if to pare two values is there any solution for this?
<body>
<div
class="container"
x-data="{
selectedMonth: 0,
clicked: null,
daysGone: 0,
counter: 0,
allCells: 0,
goAhead(){
this.counter = this.counter + 1;
return this.counter;
},
events: localStorage.getItem('events') ? JSON.parse(localStorage.getItem('events')) : [],
days: ['شنبه','یکشنبه','دوشنبه','سشنبه','چهارشنبه','پنجشنبه','جمعه'],
load(){
const dt = new persianDate();
const day = dt.toLocale('fa').format('DD');
const month = dt.toLocale('fa').format('MM');
const year = dt.toLocale('fa').format('YYYY');
var dayName = dt.toLocale('fa').format('dddd');
const firstDayOfMonth = numberToPersian(dt.toLocale('fa').startOf('month').day());
const daysInMonth = dt.daysInMonth();
dateString = {
dayName: dayName,
year: year,
month: month,
day: firstDayOfMonth
}
this.daysGone = this.days.indexOf(dateString.dayName);
this.allCells = this.daysGone + daysInMonth;
console.log(this.daysGone);
},
}"
x-init="load"
>
<div class="head"></div>
**<template x-for="cell in allCells">
<template x-if="cell < 6">
<div class="day">1</div>
</template>
<template x-if="cell >= 6">
<div class="gone">2</div>
</template>
</template>**
<div class="calendar" x-ref="calendar"></div>
</div>
</body>
i tried many ways and tried to transfer the values to x-data but it also didnt work, sorry im nood at alpine js :(
this is my all of code: in x-if template i can not use ">" or "<" sign and in the x-data also can not have a function and a if to pare two values is there any solution for this?
<body>
<div
class="container"
x-data="{
selectedMonth: 0,
clicked: null,
daysGone: 0,
counter: 0,
allCells: 0,
goAhead(){
this.counter = this.counter + 1;
return this.counter;
},
events: localStorage.getItem('events') ? JSON.parse(localStorage.getItem('events')) : [],
days: ['شنبه','یکشنبه','دوشنبه','سشنبه','چهارشنبه','پنجشنبه','جمعه'],
load(){
const dt = new persianDate();
const day = dt.toLocale('fa').format('DD');
const month = dt.toLocale('fa').format('MM');
const year = dt.toLocale('fa').format('YYYY');
var dayName = dt.toLocale('fa').format('dddd');
const firstDayOfMonth = numberToPersian(dt.toLocale('fa').startOf('month').day());
const daysInMonth = dt.daysInMonth();
dateString = {
dayName: dayName,
year: year,
month: month,
day: firstDayOfMonth
}
this.daysGone = this.days.indexOf(dateString.dayName);
this.allCells = this.daysGone + daysInMonth;
console.log(this.daysGone);
},
}"
x-init="load"
>
<div class="head"></div>
**<template x-for="cell in allCells">
<template x-if="cell < 6">
<div class="day">1</div>
</template>
<template x-if="cell >= 6">
<div class="gone">2</div>
</template>
</template>**
<div class="calendar" x-ref="calendar"></div>
</div>
</body>
i tried many ways and tried to transfer the values to x-data but it also didnt work, sorry im nood at alpine js :(
Share Improve this question edited Jul 25, 2022 at 4:22 valiano 18.7k7 gold badges71 silver badges83 bronze badges asked Jul 23, 2022 at 7:06 AmirAmir 411 gold badge1 silver badge3 bronze badges1 Answer
Reset to default 6Template tags can contain only one root element, so you need to wrap the child elements with a <div> or something:
<template x-for="cell in allCells">
<div>
<template x-if="cell < 6">
<div class="day">1</div>
</template>
<template x-if="cell >= 6">
<div class="gone">2</div>
</template>
<div>
</template>**