在下拉 livewire laravel 中选择时显示值

Question

我还是 laravel 和 livewire 的新手。我想确保用户在下拉列表中选择一个选项[ADD TRANSACTION]，并且该值将根据用户选择出现在文本框[TOTAL TO BE PAID] 中。该值应该是根据用户选择的id支付的金额。

这是我做的一些代码......

添加.php

use App\Customer;
use App\Order;
class Adds extends Component
{
public $transactDate;
public $orderT;
public $amount;
public $orderss;
public $orderTotal;
public $bankacc;
public $bankname;
public $transactType;


public function render()
{
    $this->transactDate = now("Asia/Kuala_Lumpur")->toDateString();
 
    return view('livewire.adds');
}

public function mount()
{
    $this->orderT = Order::with('customer')->get();
 
}

protected $rules = [
    'orderss.orderTotal' => 'present',
];

public function display($id)
{
    $this->orderss = $this->orderT->find($id);
}
}

adds.blade

  <div class="col-sm-12 col-md-6" >
     <div class="card">
     <div class="card-body">
        <h3 class="card-title">Add Transaction</h3>
            <form action="" method="POST">
            @csrf

            <label class="form-control-label" >Transaction Date</label>
                <input type="text"  class="form-control" name="unit" wire:model="transactDate" value="{{  $transactDate }}" readonly >
                </br>

            <label class="form-control-label" >Add Transaction</label>
             <div class="form-group mb-4">
                        <select class="form-control mr-sm-2"  wire:model="orderT">
                        <option value='' selected >Select order</option>
                        @foreach ($orderT as $os)
                        @if(($os->orderStatus === 'Completed') or ($os->orderStatus === 'In process[PAID]'))
                            <option value="{{$os->id}}" > {{$os->id}}-{{$os->customer->custName}}</option>
                        @endif
                        @endforeach
                        </select>
             </div>
            
             <label class="form-control-label" >Total to be paid RM</label>
                <input type="text"  class="form-control" name="amount" value=""wire:model="orderss.orderTotal" readonly >
            </br>

                <label class="form-control-label" >Choose Type of Payment</label>
                <div class="form-group mb-4">
                        <select class="form-control mr-sm-2" wire:model="transactType">
                            <option disabled selected>Select payment</option>
                            <option value="1" >Cash</option>
                            <option value="2" >Bank Transfer</option>
                        </select>
                </div>

                <label class="form-control-label" >Bank Account Number</label>
                <input type="text"  class="form-control" name="unit" value="" placeholder="XXXXXXX" wire:model="bankacc" >
                </br>
                <label class="form-control-label" >Bank Account Name</label>
                <input type="text"  class="form-control" name="unit" value="" placeholder="eg: Bank Islam" wire:model="bankname" >
                </br>

                            <div class="form-actions">
                                <div class="text-right">
                                    <button type="submit" class="btn btn-info">Submit</button>
                                    <button type="reset" class="btn btn-dark">Reset</button>
                                </div>
                            </div>  
            </form>
                        </div>
                    </div>

确实查看图像以可视化

example image

希望任何人都可以帮助我！我最后一年的项目还有 2 个用例要完成

Answer 1

看看这一行

<select class="form-control mr-sm-2"  wire:model="orderT">

// instead

<select class="form-control mr-sm-2"  wire:model="selectedOrder">
   <option value=''>Select order</option>
   @foreach ($orderT as $os)
      @if(($os->orderStatus === 'Completed') or ($os->orderStatus === 'In process[PAID]'))
         <option value="{{$os->id}}" > {{$os->id}}-{{$os->customer->custName}}</option>
      @endif
   @endforeach
</select>

您在此处绑定到与您检索选项相同的属性。我建议你，创建一个新属性，例如。选择顺序

public $selectedOrder = "";
public $amount;

public function updatedSelectedOrder($value)
{
   $this->amount = Order::where('id', $value)->first()->orderTotal;
}

然后你可以将值绑定到元素上

<label class="form-control-label" >Total to be paid RM</label>
<input type="text"  class="form-control" name="amount" value=""wire:model="amount" readonly >
</br>