i am using alpine js and i can not have complex condition in (if) like : x-if="a b", less than sign do not work in alpine

Question

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 compare 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 :(

Dauros · Accepted Answer

Template 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>**

i am using alpine js and i can not have complex condition in (if) like : x-if="a > b", less than sign do not work in alpine

Tags:

javascript

conditional-statements

syntax-error

alpine.js

Amir

1 Answers

Dauros

Recent Activity

Donate For Us