Блог

Я впервые использую ВЫСОКИЙ стек (включая Livewire и Alpine JS ) в одном из своих проектов. Мне нужно добавить значения всех текстовых полей для мальчиков вместе (общие мальчики, мальчики SC, мальчики ST), а также значения текстовых полей для девочек. Хотя это довольно легко сделать в Livewire, но я не хочу, чтобы запрос сервера выполнялся для простого арифметического сложения. Я не могу понять, как этого добиться в AlpineJs. Категории (Общие мальчики, мальчики SC и мальчики ST) жестко не закодированы. Они находятся в массиве компонента Livewire. Вот обзор массива:

а вот соответствующая часть представления компонента Livewire:

 <div class="flex flex-col w-full lg:grid lg:grid-cols-2 xl:grid-cols-3">
        @forelse ($classwiseEnrolmentDetails['enrolmentDetails'] as $classDetail)
            <div class="bg-gradient-to-r from-gray-800 to-gray-700 rounded-md shadow-md mx-3 my-3 flex flex-col" >
                <div class="my-2">
                    <div class="flex flex-col my-2 mx-3">
                        <div class="flex flex-row w-full items-center justify-center text-center text-2xl font-bold text-white mb-1">
                            Class {{ $classDetail['classLabel'] }}
                        </div>
                        <div class="flex flex-row w-full items-center px-3 py-2 mb-1 bg-gray-800 bg-opacity-80 rounded-md">
                            <div class="flex flex-col w-1/5 mx-1">
                                <label class="flex font-bold text-green-400">Category</label>
                            </div>
                            <div class="flex flex-col w-2/5 items-center mx-1">
                                <label class="flex font-bold text-indigo-400">Boys</label>
                            </div>
                            <div class="flex flex-col w-2/5 items-center mx-1">
                                <label class="flex font-bold text-pink-400">Girls</label>
                            </div>
                        </div>

                        @forelse ($classDetail['enrolment'] as $enrolment)
                            <div class="flex flex-row items-center w-full px-3 py-2 mb-1 bg-indigo-700 bg-opacity-30 rounded-md" >

                                <div class="flex flex-col w-1/5 mx-1">
                                    <label class="font-semibold text-green-100">{{ $enrolment['categoryName'] }}</label>
                                </div>
                                <div class="flex flex-col w-2/5  mx-1">
                                    <x-jet-input
                                        type="text"
                                        placeholder="{{ $enrolment['categoryName'] }} Boys"
                                        wire:model.defer="{{ 'classwiseEnrolmentDetails.enrolmentDetails.' . $loop->parent->index . '.enrolment.' . $loop->index . '.boys' }}"

                                        x-ref="{{ 'enrolment_' . $loop->parent->index . '_' . $loop->index . 'boys'}}"
                                        />
                                    <x-jet-input-error
                                        class="mt-1 font-bold"
                                        for="{{ 'classwiseEnrolmentDetails.enrolmentDetails.' . $loop->parent->index . '.enrolment.' . $loop->index . '.boys' }}" />

                                </div>
                                <div class="flex flex-col w-2/5 mx-1">
                                    <x-jet-input
                                        type="text"
                                        placeholder="{{ $enrolment['categoryName'] }} Girls"
                                        wire:model.defer="{{ 'classwiseEnrolmentDetails.enrolmentDetails.' . $loop->parent->index . '.enrolment.' . $loop->index . '.girls' }}"
                                        
                                        x-ref="{{ 'enrolment_' . $loop->parent->index . '_' . $loop->index . 'girls'}}"
                                        />
                                    <x-jet-input-error
                                        class="mt-1 font-bold"
                                        for="{{ 'classwiseEnrolmentDetails.enrolmentDetails.' . $loop->parent->index . '.enrolment.' . $loop->index . '.girls' }}" />
                                </div>
                            </div>
                        @empty
                            <!--FIXME: Handle the case when categories are empty -->
                        @endforelse

                        <div class="flex flex-row items-center w-full my-2 px-3 py-1 bg-yellow-100 rounded-md border-2 border-yellow-300">
                            <div class="flex flex-col w-1/5 mx-1 font-bold">
                                Total
                            </div>
                            <div class="flex flex-col w-2/5 mx-1 font-semibold">
                                Boys: Boys Total needs to be displayed here
                            </div>
                            <div class="flex flex-col w-2/5 mx-1 font-semibold">
                                Girls: Girls Total needs to be displayed here
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @empty
</div>
 

Всякий раз, когда пользователь вводит данные в любое из текстовых полей (девочки или мальчики), соответствующая сумма девочек/мальчиков должна обновляться. Хотя я знаю, что у AlpineJs есть @input, но я не мог понять, как я мог бы добавить все текстовые поля в это событие. Проблема в том, что, поскольку количество текстовых полей является переменным, я не знаю, как перебирать все ссылки на x в событии @input или в div, где мне нужно отобразить общее количество. Пожалуйста, помогите