Livewire buttons to increment an input fails to work with alpine

Hi I'm trying to build a form that enables a user to input a score for themselves and at least 3 others. I have the basic form set up that links back to the livewire model and updates scores etc. Stage 1 worked.

On a mobile device I'm now trying to add buttons either side of the input to enable the user to click and increment or decrement that number. I can't get this stage to work. When I click the button it fails to take any action and not even show a test console log.

For each input there are 4 players x 18 holes. Only the current hole is shown - the rest are hidden. I think it may be something to do with refs for each input. I extracted the code as a test to a single page and single elements and it works as expected but back in the entire page it fails to work.

Here's my code:

{{-- this controls which slide/hole is being shown --}}
<div
       class="w-full mx-auto relative border-2 border-red-800 pb-3"
       x-data="{ activeSlide: 1, slides: [1, 2, 3, 4, 5,6,7,8,9,10,11,12,13,14,15,16,17,18] }"
       >
       <!-- Slides -->

       @for($x=1; $x <= 18; $x++)
               <div class="flex flex-col space-y-2">
               {{--                        Hole details--}}
                <div  x-show="activeSlide === {{$x}}"
                         class="w-full flex justify-between items-center text-gray-800 rounded-lg text-2xl font-bold px-2">
                       <div class="text-center font-bold" x-text="'Hole {{$x}}'"></div>
                       <div class="text-gray-600 font-bold text-xl"
                                x-text="'Par {{$this->courseHoles[$x-1]->par}}'">
                       </div>
                       <div class="text-gray-600 font-bold text-xl"
                                 x-text="'SI {{$this->courseHoles[$x-1]->si}}'"></div>
                        </div>
{{-- This displays the hole input for each hole and player --}}
                        @foreach($players as $player)
                            <div wire:key="s{{$player->id}}-{{$x}}"
                                 x-show="activeSlide === {{$x}}"
                                 x-cloak
                                 class="p-12 mx-2 font-bold text-5xl h-12 flex items-center bg-teal-500 text-white rounded-lg">
        <span class="w-12 text-center text-3xl"
              x-text="'{{$player->present()->initials()}}'">
        </span>
        <span class="w-12 text-center text-2xl text-gray-300"
                    x-text="{{$handicaps[$player->id]['adjusted_handicap']}}">
        </span>
        <div class="flex items-center justify-center"
                 x-data="{
                                score_{{$player->id}}_{{$x}}: {{ $scores[$player->id][$x]['score'] ?? 0 }},
                                test() { console.log('test'); } }"
                                >
        {{--This button should increment--}}
		<button @click="score_{{$player->id}}_{{$x}} = Math.max(0, score_{{$player->id}}_{{$x}} - 1); $refs.input_{{$player->id}}_{{$x}}.value = score_{{$player->id}}_{{$x}}"
                       class="flex justify-center items-center w-10 h-10 rounded-full text-white focus:outline-none bg-gray-400 hover:bg-gray-500">
                     <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                             xmlns="http://www.w3.org/2000/svg">
                           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M20 12H4"></path>
                     </svg>
           </button>
{{--this is the input with a unique name --}}
                        <input type="number" name="score[{{$player->id}}][{{$x}}]"
                                           x-ref="input_{{$player->id}}_{{$x}}"
                                           x-model="score_{{$player->id}}_{{$x}}"
                                           wire:model="scores.{{$player->id}}.{{$x}}.score"
                                           wire:change="updateScore({{$x}}, {{$player->id}}, $event.target.value)"
                                           min="0" max="9"
                                           wire:blur="storeScore({{$x}}, {{$player->id}})"
                                           class="w-20 h-12 border border-gray-300 rounded-lg text-3xl z-50 text-zinc-900" />
{{--this button should decrement the value--}}
            <button @click="score_{{$player->id}}_{{$x}} = Math.min(9, score_{{$player->id}}_{{$x}} + 1); $refs.input_{{$player->id}}_{{$x}}.value = score_{{$player->id}}_{{$x}}"
                                            class="flex justify-center items-center w-10 h-10 rounded-full text-white focus:outline-none bg-indigo-500 hover:bg-indigo-600">
                                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                             xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M12 6v12M6 12h12"></path>
                                        </svg>
                                    </button>
{{--this button should run the test function - console.test--}}
                                    <button @click="test()"
                                            class="flex justify-center items-center w-10 h-10 rounded-full text-white focus:outline-none bg-indigo-500 hover:bg-indigo-600">
                                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                             xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M12 6v12M6 12h12"></path>
                                        </svg>
                                    </button>
                                </div>
                                <span class="p-2 w-12 h-12 ml-2 text-2xl text-center rounded-full bg-gray-100 text-teal-500"
                                      x-text="'{{$scores[$player->id][$x]['points']}}'"></span>
                            </div>

                        @endforeach

                    </div>
                @endfor


                <!-- Prev/Next Arrows -->
                {{--            TODO: shift this down to the botton or top?--}}
                <div class="absolute inset-0 flex ">
                    <div class="flex items-center justify-start w-1/2">
                        <button
                                class="bg-white text-teal-500 hover:text-orange-500 font-bold hover:shadow-lg rounded-full w-12 h-12 -ml-6"
                                x-on:click="activeSlide = activeSlide === 1 ? slides.length : activeSlide - 1">
                            {{--                        &#8592;--}}
                            <x-icon.chevron-left class="w-6 h-6" />
                        </button>
                    </div>
                    <div class="flex items-center justify-end w-1/2">
                        <button
                                class="bg-white text-teal-500 hover:text-orange-500 font-bold hover:shadow rounded-full w-12 h-12 -mr-6"
                                x-on:click="activeSlide = activeSlide === slides.length ? 1 : activeSlide + 1">
                            {{--                        &#8594;--}}
                            <x-icon.chevron-right class="w-6 h-6 ml-3" />
                        </button>
                    </div>
                </div>

               
            </div>

I'm unsure how I can get the basic click to work and assume it's to do with either a referencing issue or the alpine component being in a nested component - new to alpine and as always still learning

LaryAI

1 year ago

Level 58

The issue you're experiencing with Alpine.js not responding to button clicks could be due to a few potential problems, such as scoping issues or conflicts between Alpine.js and Livewire. Here are some steps and suggestions to help you troubleshoot and resolve the issue:

Ensure Alpine.js is Loaded Correctly: Make sure that Alpine.js is properly included in your project and is loaded before your script runs. You can include it in your HTML like this:
```
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>
```
Check for JavaScript Errors: Open your browser's developer console and check for any JavaScript errors that might be preventing Alpine.js from functioning correctly.
Scope of x-data: Ensure that the x-data attribute is correctly scoped. If you have nested x-data components, make sure that the data and methods are accessible where you need them. In your case, each player's score is managed within its own x-data scope, which should be fine, but double-check that the data is initialized correctly.

Console Log Test: You mentioned that the console log test isn't working. Ensure that the test method is correctly defined within the x-data scope. Here's a simplified example of how it should look:

<div x-data="{ score: 0, test() { console.log('test'); } }">
    <button @click="score = Math.max(0, score - 1)">-</button>
    <input type="number" x-model="score">
    <button @click="score = Math.min(9, score + 1)">+</button>
    <button @click="test()">Test</button>
</div>

Livewire and Alpine.js Interaction: Sometimes, Livewire and Alpine.js can interfere with each other, especially if they are trying to manage the same piece of state. Ensure that the wire:model and x-model are not conflicting. You might need to use @entangle to synchronize Livewire and Alpine.js state:
```
<input type="number" x-model="score" x-ref="input" wire:model.defer="scores.{{$player->id}}.{{$x}}.score" @change="$wire.set('scores.{{$player->id}}.{{$x}}.score', $refs.input.value)">
```
Debugging: Add some debugging statements to ensure that the Alpine.js component is being initialized and that the data is being updated as expected. For example, you can add console.log statements inside your Alpine.js methods to track their execution.
Simplify and Isolate: If the problem persists, try isolating the problematic part of your code into a smaller, standalone example. This can help you identify if the issue is with the specific setup or with the integration of Alpine.js and Livewire.

By following these steps, you should be able to identify and resolve the issue with your Alpine.js buttons not working as expected. If the problem persists, consider providing a more minimal example to further isolate the issue.

Please or to participate in this conversation.