laravel livewire insert selected data from datatable to an application form - laravel-livewire

Question

I have a datatable with a list of job/career vacancies where in the selected item_number and position_title should be automatically filled in the application form.
item_number and position_title becomes null in the apply.blade.php
Vacant Component
class Vacant extends Component
{
use WithPagination;
use WithSorting;
use WithConfirmation;
protected $listeners = ['careerUpdated'];
public int $perPage;
public array $orderable;
public string $search = '';
public array $selected = [];
public array $paginationOptions;
protected $queryString = [
'search' => [
'except' => '',
],
'sortBy' => [
'except' => 'id',
],
'sortDirection' => [
'except' => 'asc',
],
];
public function careerUpdated() {
// Just Blank
}
public function getSelectedCountProperty()
{
return count($this->selected);
}
public function updatingSearch()
{
$this->resetPage();
}
public function updatingPerPage()
{
$this->resetPage();
}
public function resetSelected()
{
$this->selected = [];
}
public function vacant($id){
$career = Career::find($id);
$this->career = $career;
$this->emit('newCareer', $career->id);
}
public function mount()
{
$this->sortBy = 'id';
$this->sortDirection = 'asc';
$this->perPage = 100;
$this->paginationOptions = config('project.pagination.options');
$this->orderable = (new Career())->orderable;
}
public function render()
{
$query = Career::advancedFilter([
's' => $this->search ?: null,
'order_column' => $this->sortBy,
'order_direction' => $this->sortDirection,
]);
$careers = $query->paginate($this->perPage);
return view('livewire.career.vacant', compact('careers', 'query'));
}
vacant.blade.php
<table class="table table-index w-full" style="background-color: white; font-size: 13px;">
<thead>
<tr >
<th>
{{ trans('cruds.career.fields.item_number') }}
#include('components.table.sort', ['field' => 'item_number'])
</th>
<th>
{{ trans('cruds.career.fields.postition_title') }}
#include('components.table.sort', ['field' => 'postition_title'])
</th>
</tr>
</thead>
<tbody>
#forelse($careers as $career)
<tr>
<td>
{{ $career->item_number }}
</td>
<td>
{{ $career->postition_title }}
</td>
<td>
<div class="flex justify-end">
<a class="btn btn-sm btn-success mr-2" href="{{ route('applicants.apply', ['career' => $career->id]) }}">
{{ trans('Apply') }}
</a>
{{ trans('Apply') }}
</a>
</div>
</td>
</tr>
#empty
<tr>
<td colspan="10">No entries found.</td>
</tr>
#endforelse
</tbody>
</table>
Apply Component
class Create extends Component
{
public Applicant $applicant;
public $item_number, $position_title;
public Career $career;
public array $listsForFields = [];
public function mount(Applicant $applicant)
{
$this->applicant = $applicant;
$this->initListsForFields();
$getCareerID = explode('/', url()->current());
$this->career_id = end($getCareerID);
}
public function render()
{
return view('livewire.applicant.apply', ['career' => Career::find($this->career_id)]);
}
public function submit()
{
$this->validate();
$this->applicant->save();
$this->syncMedia();
return redirect()->route('admin.applicants.index');
}
protected function rules(): array
{
return [
'applicant.item_number' => [
'string',
'required',
],
'applicant.position_title' => [
'string',
'required',
],
'applicant.first_name' => [
'string',
'required',
],
'applicant.middle_name' => [
'string',
'required',
],
'applicant.last_name' => [
'string',
'required',
],
'applicant.email' => [
'email:rfc',
'required',
'unique:applicants,email',
],
}
}
apply.blade.php
<form wire:submit.prevent="submit">
<div class="form-group {{ $errors->has('career.item_number') ? 'invalid' : '' }}">
<label class="form-label" for="item_number">{{ trans('cruds.career.fields.item_number') }}</label>
<input class="form-control" type="text" name="item_number" id="item_number" wire:model.defer="career.item_number">
<div class="validation-message">
{{ $errors->first('career.item_number') }}
</div>
<div class="help-block">
{{ trans('cruds.career.fields.item_number_helper') }}
</div>
</div>
<div class="form-group {{ $errors->has('career.postition_title') ? 'invalid' : '' }}">
<label class="form-label" for="postition_title">{{ trans('cruds.career.fields.postition_title') }}</label>
<input class="form-control" type="text" name="postition_title" id="postition_title" wire:model.defer="career.postition_title">
<div class="validation-message">
{{ $errors->first('career.postition_title') }}
</div>
<div class="help-block">
{{ trans('cruds.career.fields.postition_title_helper') }}
</div>
</div>
<div class="form-group {{ $errors->has('applicant.first_name') ? 'invalid' : '' }}">
<label class="form-label required" for="first_name">{{ trans('cruds.applicant.fields.first_name') }}</label>
<input class="form-control" type="text" name="first_name" id="first_name" required wire:model.defer="applicant.first_name">
<div class="validation-message">
{{ $errors->first('applicant.first_name') }}
</div>
<div class="help-block">
{{ trans('cruds.applicant.fields.first_name_helper') }}
</div>
</div>
<div class="form-group {{ $errors->has('applicant.middle_name') ? 'invalid' : '' }}">
<label class="form-label required" for="middle_name">{{ trans('cruds.applicant.fields.middle_name') }}</label>
<input class="form-control" type="text" name="middle_name" id="middle_name" required wire:model.defer="applicant.middle_name">
<div class="validation-message">
{{ $errors->first('applicant.middle_name') }}
</div>
<div class="help-block">
{{ trans('cruds.applicant.fields.middle_name_helper') }}
</div>
</div>
<div class="form-group {{ $errors->has('applicant.last_name') ? 'invalid' : '' }}">
<label class="form-label required" for="last_name">{{ trans('cruds.applicant.fields.last_name') }}</label>
<input class="form-control" type="text" name="last_name" id="last_name" required wire:model.defer="applicant.last_name">
<div class="validation-message">
{{ $errors->first('applicant.last_name') }}
</div>
<div class="help-block">
{{ trans('cruds.applicant.fields.last_name_helper') }}
</div>
</div>
<div class="form-group {{ $errors->has('applicant.email') ? 'invalid' : '' }}">
<label class="form-label required" for="email">{{ trans('cruds.applicant.fields.email') }}</label>
<input class="form-control" type="email" name="email" id="email" required wire:model.defer="applicant.email">
<div class="validation-message">
{{ $errors->first('applicant.email') }}
</div>
<div class="help-block">
{{ trans('cruds.applicant.fields.email_helper') }}
</div>
</div>
<div class="form-group">
<button class="btn btn-indigo mr-2" type="submit">
Submit
</button>
</div>
</form>