Level 16
when i press success want to make toggle success(green) not success(red)
Could you please explain this. How are you planning to toggle the state?
Apr 7, 2021
17
Level 1
LiveWire live actions question
Hi i want to have something like this:https://prnt.sc/116mqrg
when i press success want to make toggle success(green) not success(red) and changes on the sql to 1 or 0 any idea to do that? i try it but cant work.
public function success($serviceID)
{
$this->serviceID=$serviceID;
$data = [
'success' => $this->success,
];
service::find ($this->serviceID)->update($data);
}
Table:
<td wire:click="success({{ $service->id }})" class="border px-4 py-2 cursor-pointer">
@if ($service->success==1)
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> Success </span>
@else
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"> Not Success </span>
@endif
</td>
Level 1
if you see the picture of the table i want to click the field of success and then change the success to not success, but i dont know the way to do this
Level 1
https://prnt.sc/116oazd i make gif example
Level 3
you are going around.
Use nested component. That's more simple.
https://laravel-livewire.com/docs/2.x/nesting-components
make two compoent - > Outer / RowComponent
in Outer blade
<div>
@foreach ($users as $user)
@livewire('row-compont', ['user' => $user], key($user->id))
@endforeach
</div>
in RowComponent.php
function mount( $user ){
$this->user = $user ;
}
function success(){
$this->user->status = ! $this->user->status;
$this->user->save();
}
in row-component.blade.php
<td
wire:click='success()'
class="{{ $user->status == 1 ? 'text-green-800' : 'text-red-800' }}"
>
{{ $user->status == 1 ? 'success' : 'not success' }}
</td>
Above code is sudo codes but you can catch the point.
1 like
Level 1
It doesnt work :/
Level 3
The wire:click you must do it in the span elements on each if-else statement
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800" @if ($service->success==1) wire:click="$set('success',0)" @elsif($service->success==0) wire:click="$set('success',1)" @endif>@if ($service->success==1) Success @elsif($service->success==0) Not Success @endif</span>
1 like
Level 1
The wire:click $set doesnt work to me, must pass two variables something like
@if ($service->success == 1) wire:click="success ({{ $service->id }},{{ $service->success=0 }})")
I want to make more clean like this statements ? : but still don't work .
Because must update the specific value id
The function public
function success($serviceID,$success)
{
$this->serviceID=$serviceID;
$this->success=$success;
$data = [
'success' => $this->success,
];
;
service::find ($this->serviceID)->update($data);
}
Level 1
Ok i made some changes , with that settings the values passing inside the success function , the only problem is that doesnt run the query , and i dont know why
public function success($serviceID,$success)
{
$this->serviceID=$serviceID;
$this->success=$success;
$data = [
'success' => $this->success,
];
service::find ($this->serviceID)->update($data);
}
<td class="border px-4 py-2 cursor-pointer">
@if ($service->success == 1)
<span wire:click="success ({{ $service->id }},{{ $service->success=0 }})" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> Success </span>
@else
<span wire:click="success ({{ $service->id }},{{ $service->success=1 }})" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"> Not Success </span>
@endif
</td>
Level 3
@if ($service->success == 1) wire:click="success ({{ $service->id }},{{ $service->success=0 }})") .... remember close the @endif
You can handle that for diff ways, mine was just one. Maybe the method wasn't well, I can test that now $set('success','0'). This set the $this->success property, and you can be aware of this change with the updatedSucess().
public function updatedSuccess()
{
$this->user->status = $this->success;
$this->user->save();
}
1 like
Level 3
If you use method for looping all rows, it go too much complicated.
Use followings. It is working and simple.
- web.php ( route)
Route::get('/', function () {
$users= User::paginate();
return view('welcome', ['users'=>$users ]);
});
- welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@livewireStyles
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="">
@foreach ($users as $user)
@livewire('row', ['user' => $user], key($user->id))
@endforeach
@livewireScripts
</body>
</html>
- Row.php ( livewire component )
namespace App\Http\Livewire;
use App\Models\User;
use Livewire\Component;
class Row extends Component
{
protected $user;
public function render()
{
return view('livewire.row',[
'user'=>$this->user
] );
}
function mount( $user) {
$this->user = $user;
}
function toggle( $user_id){
$this->user = User::find( $user_id);
$this->user->status = ! $this->user->status;
$this->user->save();
}
}
- row.blade.php ( livewire view )
<div class="flex justify-around">
<div class="">{{ $user->id }}</div>
<div
wire:click='toggle({{ $user->id }})'
class="{{ $user->status ? 'text-green-700': 'text-red-700' }} cursor-pointer bg-gray-300"
>
{{ $user->status ? 'success': 'fail' }}
</div>
<div class="">{{ $user->name }}</div>
</div>
1 like
Level 3
I will give you one more tip..
<div class="flex justify-around">
<div class="">{{ $user->id }}</div>
<div
onclick="confirm('Do you really want to change?') || event.stopImmediatePropagation()"
wire:click='toggle({{ $user->id }})'
class="{{ $user->status ? 'text-green-700': 'text-red-700' }} cursor-pointer w-20"
>
{{ $user->status ? 'success': 'fail' }}
</div>
<div class="">{{ $user->name }}</div>
</div>
Try. You would want to keep it.
Level 1
Why is that too complicated? I dont know but i reach to successfully change the values with more simple way ,But im facing an error that i dont know why , look the gif : https://prnt.sc/117exh1
and the code that updates the value:
public function success($serviceID,$action)
{
service::find($serviceID)->update(['success' => $action]);
}
my blade (its table with foreach):
<td wire:click="success({{ $service->id }})" class="border px-4 py-2 cursor-pointer">
@if ($service->success == 1)
<span wire:click="success ({{ $service->id }},0)" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> Success </span>
@else
<span wire:click="success ({{ $service->id }},1)" class="px-2 inline-flex text-xs leading-5 font-semibold
rounded-full bg-red-100 text-red-800"> Not Success </span>
@endif
</td>
Level 29
<td wire:click="success({{ $service->id }})" why do you need this click handler ?
Level 1
What else can i use? must have button with relative Row id to know which row must update the function..
Level 29
Yes but you are doing it inside the td why do you need the handler at the td element ? Here you don't pass the $action which is a required param in your method
1 like
Level 1
Ohh my!!! I forgot to remove that from the tons of changes that i made! now its working!!!! thank you very much all for help!!!
Level 29
Yep some times we need a fresh set of eyes cheers
1 like
Please or to participate in this conversation.