CODEWITHSUNDEEP
javascriptlaravel-livewirealpine.js
kalecaliber
kalecaliber

Reputation: 21

How to keep the button focused on click of the button with alpine js?

I deployed a simple survey form with laravel 8. When the user clicks on the rating button, the button color changes but the problem is when the user clicks it should focus on only the clicked button. I need the clicked button color to be changed and stay focused on it even the user clicks outside. How can I achieve this with alpine js?

The below code is the blade file. I am looping to show the questions and the rating buttons from an array from the controller page.

<div>
            @foreach ($formDetail as $num => $row)

            <div class="grid grid-cols-1 mt-2 p-4" wire:model.defer="formDetail.{{$num}}.question">{{$formDetail[$num]['question']}}</div>

            <div class="flex flex-nowrap gap-2 p-6">

            @foreach ($ratings as $index => $r)
            <div   x-data="{click:false}">
            <button type="button"   @click="click=true" :class="click?'bg-red-400':'bg-green-500'"      wire:click.prevent="chooseRate({{$index}},{{$num}})" class="rounded  text-white px-2.5 cursor-pointer" id="rate">{{$r}}</button>

        </div>

            @endforeach
            @error('rating') <div class="text-red-400"> {{ $message }} </div>  @enderror



        </div>
        <div class="p-8 flex flex-nowrap gap-6 -my-6">
            <span class="-mx-2">Lowest</span>
            <span class="mx-64">Highest</span>
          </div>

          <div class="flex flex-nowrap w-2/3 p-6">
            <textarea  wire:model.defer="formDetail.{{$num}}.comment" class="border-blue-200 border-2 w-3/4 h-16  focus:border-blue-500 focus:outline-none" name="comment" id="" cols="30" rows="10"></textarea>

        </div>
        @endforeach
    </div>

Upvotes: 0

Views: 1349

Answers (1)

DarkLeafyGreen
DarkLeafyGreen

Reputation: 70416

Alpine component:

<div class="flex w-full h-screen justify-center items-center">
  <div x-data="
    {
        rating: 0,
        hoverRating: 0,
        ratings: [{'amount': 3, 'label':'Okay'}, {'amount': 4, 'label':'Good'}, {'amount': 5, 'label':'Great'}],
        rate(amount) {
            if (this.rating == amount) {
                this.rating = 0;
            }
            else this.rating = amount;
        }
    }
    ">
    <div class="flex space-x-3">
      <template x-for="(value, index) in ratings" :key="index">
        <button 
            @click="rate(value.amount)" 
            @mouseover="hoverRating = value.amount" 
            @mouseleave="hoverRating = rating" 
            aria-hidden="true" 
            class="bg-gray-100 focus:outline-none focus:shadow-outline p-1 w-12 m-0 cursor-pointer" 
            :class="{
                'text-gray-600': hoverRating == value.amount,
                'text-red-400': rating == value.amount
            }
        ">
          <span x-text="index" />
        </button>
      </template>
    </div>
  </div>
</div>

Click here for live example.

Integrate with livewire using @entangle:

rating: @entangle('rateProperty')

Instead of using blade loop to show the buttons, provide the ratings as Json to the alpine component, like so:

ratings: {{ json_encode($ratings) }}

To read more about entangle see https://laravel-livewire.com/docs/2.x/alpine-js

Upvotes: 1

Related Questions