CODEWITHSUNDEEP
javascriptalpine.jspersistflatpickr
minemindmedia
minemindmedia

Reputation: 409

AlpineJS Multiple Class Bindings, x-data, $persist + Flatpickr

I am attempting to disable a button using AlpineJS unless certain conditions are met. This is my button code:

<button
    class="bg-red p-4 rounded"
    :class="{'opacity-50 pointer-events-none': ((adults + children) === 0), 'opacity-50 pointer-events-none': charter === '' }"
>
Submit
</button>

This is my x-data, retrieving values from session storage with $persist

    x-data="{
        destination: $persist('').using(sessionStorage).as('_x_destination'),
        charter: $persist('').using(sessionStorage).as('_x_charterlength'),
        dateRange: $persist([]).using(sessionStorage).as('_x_range'),
        adults: $persist(0).using(sessionStorage).as('_x_adults'),
        children: $persist(0).using(sessionStorage).as('_x_children')
    }"

I have 3 different conditions I want to be met in order for the button to have pointe-events. The two above are partially working.

If adults + children is equal to zero, the button remains with no pointer events. If adults + children is equal to one or more, then the button still has no pointer events. This is good so far.

If I then update charter to not be null, the button now has pointer events and can be clicked.

However, if I the update charter to not be null first, prior to setting adults + children to be greater than zero, then the button somehow becomes active with pointer events before it should.

Not sure why the two conditions above aren't working in conjunction with each other in either scenario.

Additionally, I have a third condition I would like to introduce into the button. That is x-data - dateRange which is for use with Flatpickr

My Flatpickr code looks like this:

    <div x-data="{
        thePicker: null,
        init() {
            this.thePicker = flatpickr(this.$refs.picker, {
                mode: 'range',
                inline: false,
                dateFormat: 'M j',
                showMonths: 2,
                defaultDate: this.dateRange,
                onChange: (selectedDates) => {this.dateRange = [...selectedDates];}
            });
        },
    }"
    >
        <div
        class="flex items-center justify-center w-full overflow-hidden text-sm text-black bg-white border border-gray-400 rounded-lg"
        >
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="ml-4 bi bi-calendar-event-fill" viewBox="0 0 16 16">
                <path d="M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4zM16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2m-3.5-7h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5"/>
            </svg>
            <input type="text"
                x-ref="picker"
                placeholder="Add dates"
                class="px-4 py-2 text-sm placeholder-gray-600 border-0 bg-none focus:ring-0 "
            >
        </div>
    </div>

I am struggling to determine how to set the 3rd condition, even as the only condition, by setting 'opacity-50 pointer-events-none': dateRange === '' OR 'opacity-50 pointer-events-none': dateRange === null }

Nothing I've tried appears to recognize the Flatpickr as not being set.

Upvotes: 1

Views: 220

Answers (1)

minemindmedia
minemindmedia

Reputation: 409

Managed to solve my own question with:

:class="[((adults + children) === 0) ? 'opacity-50 pointer-events-none' : '', charter === '' ? 'opacity-50 pointer-events-none' : '', dateRange == '' ? 'opacity-50 pointer-events-none' : '']"

Two == appear to be the fix.

I am not sure why exactly because it's difficult to find the documentation explaining it but if someone would like to comment why or provide documentation, that would be great.

Upvotes: 0

Related Questions