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