I have such a component. The payment button is not active until the user selects a payment option and method
return-ad.blade.php
@php use App\Models\UserLimit; @endphp
<div>
@if ($template == 'mini')
@if ($estate->active_to > date("Y-m-d H:i:s"))
<a href="#" wire:click.prevent="moveToActive()"><i
class="ico-corner-up-left"></i><span>@lang('app.Restore')</span></a>
@else
<a href="#return-{{$estate_id}}" class="btn-change-modal"><i
class="ico-corner-up-left"></i><span>@lang('app.Restore')</span></a>
@endif
@else
@if ($estate->active_to > date("Y-m-d H:i:s"))
<a href="#" wire:click.prevent="moveToActive()" class="primary-btn flex size2 mb-16">
<div class="btn-text">@lang('app.Restore')</div>
</a>
@else
<a href="#return-{{$estate_id}}" class="primary-btn flex size2 mb-16 btn-change-modal">
<div class="btn-text">@lang('app.Restore')</div>
</a>
@endif
@endif
<div class="wrapper-custom-modal size2" id="return-{{$estate_id}}">
<form class="modal-custom" wire:submit="pay">
<div class="close-btn-style close-btn-modal"><i class="ico-close-l"></i></div>
<div class="caption">@lang('app.Restore ad')</div>
@php
$limit = Auth::guard('web')->user()->getLimit(NULL, NULL, UserLimit::TYPE_RETURN);
$amount = $limit['free'] + $limit['pay'];
@endphp
@if ($amount > 0)
<div
class="gray-style-1 mb-16">@lang('app.Balance')</div>
<button type="button" wire:click="byLimit()"
class="btn-dark secondary mb-16 btnSend height-48 full-width">@lang('app.Restore')</button>
@else
<div class="one-benefit-modal">
<div class="caption-m">@lang('app.Select variant')</div>
<ul class="radio-check-list">
@foreach(\App\Models\ServiceVariant::where('service_id', 4)->get() as $variant)
<li>
<label class="radio-check">
<input type="radio" wire:model="variant_id" name="variant_id" value="{{$variant->id}}">
<span>{{$variant->t('name')}}/ {{$variant->price->price}} AZN</span>
</label>
</li>
@endforeach
</ul>
</div>
<div class="one-benefit-modal">
<div class="caption-m">@lang('app.Payment')</div>
<ul class="radio-check-list">
<li>
<label class="radio-check">
<input type="radio" wire:model="payment" name="payment" value="card">
<span>@lang('app.Card')</span>
</label>
</li>
@if(Auth::guard('web')->check())
<li>
<label class="radio-check">
<input type="radio" wire:model="payment" name="payment" value="balance">
<span>@lang('app.From balance') ({{Auth::guard('web')->user()->fullBalance()}} AZN)</span>
</label>
</li>
@endif
</ul>
</div>
<button class="btn-dark secondary mb-16 btnSend height-48 full-width" @if (is_null($payment) || is_null($variant_id)) disabled @endif>@lang('app.Pay')</button>
@endif
</form>
<div class="close-modal-bg"></div>
</div>
</div>
ReturnAd.php
<?php
namespace App\Livewire;
use App\Mail\Email;
use App\Models\Estate;
use App\Models\Payment;
use App\Models\PaymentHistory;
use App\Models\ServiceVariant;
use App\Models\ServiceVariantPrice;
use App\Models\Setting;
use App\Models\TemplateNotification;
use App\Models\User;
use App\Models\UserLimit;
use App\Models\UserNotification;
use Illuminate\Support\Facades\Mail;
use Jenssegers\Agent\Agent;
use Livewire\Component;
class ReturnAd extends Component
{
public $payment;
public $variant_id;
public $estate_id;
public $template = 'full';
public $estate = null;
public function mount()
{
if ($this->estate_id) {
$this->estate = Estate::find($this->estate_id);
}
}
public function render()
{
return view('livewire.return-ad');
}
public function pay()
{
}
public function byLimit()
{
}
public function moveToActive()
{
}
public function updated($propertyName, $value): void
{
\Log::info("Властивість $propertyName була змінена на: $value");
}
}
When I select the option and payment – the button does not become active. Nothing is written in the logs either. Why might the values not update?
I tried to display payment and variant_id in the template – they do not change.
I use Laravel 10 and Livewire 3
>Solution :
Since Livewire 3, the attribute is not updated immediately. You need to change wire:model to wire:model.live.
<input type="radio" wire:model.live="payment" name="payment" value="balance">
You can read about that here: https://livewire.laravel.com/docs/upgrading#wiremodel