Level 122
perhaps not loading livewire scripts?
Sep 16, 2021
2
Level 2
Input wire:model not showing value of mounted variable
I'm just trying to get a edit screen to prefill the student's information for editing. What am I doing wrong? The variables are public, and wire:model is set for each variable.
Controller:
namespace App\Http\Livewire\Student;
use Livewire\Component;
use App\Models\Student;
class Studentedit extends Component
{
public $cslid, $f1_id, $dob, $salutation, $first_name, $middle_name, $last_name,
$address1, $address2, $city, $state, $zipcode, $home_phone, $bus_phone, $cell_phone, $email;
public $student_id;
public $student=[];
protected $rules = [
'first_name' => 'required',
'last_name' => 'required',
];
public function mount($sid)
{
$student = Student::findOrFail($sid);
$this->studentid = $this->student_id;
$this->cslid = $student->cslid;
$this->f1_id = $student->f1_id;
$this->dob = $student->dob;
$this->salutation = $student->salutation;
$this->first_name = $student->first_name;
$this->middle_name = $student->middle_name;
$this->last_name = $student->last_name;
$this->address1 = $student->address1;
$this->address2 = $student->address2;
$this->city = $student->city;
$this->state = $student->state;
$this->zipcode = $student->zipcode;
$this->email = $student->email;
$this->home_phone = $student->home_phone;
$this->bus_phone = $student->bus_phone;
$this->cell_phone = $student->cell_phone;
}
public function render()
{
return view('livewire.student.edit');
}
}
view
<div class="p-4">
<div>
<button type="button" class="btn-primary mb-2 py-1 px-2 transition duration-300 ease-in-out focus:outline-none focus:shadow-outline bg-gray-500 hover:bg-black text-white font-normal rounded">
<a href="/students">Back</a></button>
</div>
<div class="2xl:w-1/2 xl:w-1/2 lg:w-3/4 sm:w-full">
<div class="p-2 shadow overflow-hidden bg-gray-200 border border-blue-800 sm:rounded-lg">
<div class="mb-5 flex flex-col p-3 rounded-xl border border-black bg-white shadow-md">
<section class="text-center text-3xl font-bold">
Student Information
</section>
</div>
<div>
<div class="grid grid-cols-3 gap-4">
<input type="hidden" wire:model="studentid">
<div>
<label class="p-1 block font-bold text-sm text-black-700" for="cslid">
CSL-ID:
</label>
<input wire:model="cslid" type="text"
class="text-sm sm:text-base pl-2 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400" />
@error('cslid')
<div class="text-sm text-red-500 ml-1">
</div>
@enderror
</div>
<div>
<label class="p-1 block font-bold text-sm text-black-700" for="f1_id">
F1-ID:
</label>
<input wire:model="f1_id" type="text"
class="text-sm sm:text-base pl-2 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400" />
@error('f1_id')
<div class="text-sm text-red-500 ml-1">
</div>
@enderror
</div>
<div>
<label class="p-1 block font-bold text-sm text-black-700" for="dob">
Birth Date:
</label>
<input wire:model="dob" type="date"
class="text-sm sm:text-base pl-2 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400" />
@error('dob')
<div class="text-sm text-red-500 ml-1">
</div>
@enderror
</div>
</div>
<div class="mt-3 divide-y-2 divide-blue-800 divide-solid">
<div></div>
<div></div>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="pl-1 pt-2 block font-bold text-sm text-black-700" for="first_name">
First Name:
</label>
<input type="text" name="first_name" id="first_name"
class="text-sm sm:text-base pl-2 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400" />
@error('first_name')
<div class="text-sm text-red-500 ml-1">
</div>
@enderror
</div>
<div>
<label class="pl-1 pt-2 block font-bold text-sm text-black-700" for="middle_name">
Middle Name:
</label>
<input wire:model="middle_name" type="text"
class="text-sm sm:text-base pl-2 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400" />
@error('middle_name')
<div class="text-sm text-red-500 ml-1">
</div>
@enderror
</div>
</div>
<div>
<label class="pl-1 pt-2 block font-bold text-sm text-black-700" for="last_name">
Last Name:
</label>
<input wire:model="last_name" type="text"
class="text-sm sm:text-base pl-2 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400" />
@error('last_name')
<div class="text-sm text-red-500 ml-1">
</div>
@enderror
</div>
<div>
<label class="pl-1 pt-2 block font-bold text-sm text-black-700" for="address1">
Address 1:
</label>
<input wire:model="address1" type="text"
class="text-sm sm:text-base pl-2 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400" />
@error('address1')
<div class="text-sm text-red-500 ml-1">
</div>
@enderror
</div>
<div>
<label class="pl-1 pt-2 block font-bold text-sm text-black-700" for="address2">
Address 2
</label>
<input wire:model="address2" type="text"
class="text-sm sm:text-base pl-2 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400" />
@error('address2')
<div class="text-sm text-red-500 ml-1">
</div>
@enderror
</div>
<div class="flex">
<div class="w-3/6">
<label class="pl-1 pt-2 block font-bold text-sm text-black-700" for="city">
City:
</label>
<input wire:model="city" type="text"
class="text-sm sm:text-base pl-2 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400" />
@error('city')
<div class="text-sm text-red-500 ml-1">
</div>
@enderror
</div>
<div class="w-1/6">
<label class="pl-1 pt-2 block font-bold text-sm text-black-700" for="state">
State:
</label>
<input wire:model="state" type="text"
class="text-sm sm:text-base pl-2 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400" />
@error('state')
<div class="text-sm text-red-500 ml-1">
</div>
@enderror
</div>
<div class="w-2/6">
<label class="pl-1 pt-2 block font-bold text-sm text-black-700" for="zipcode">
Zip Code:
</label>
<input wire:model="zipcode" type="text"
class="text-sm sm:text-base pl-2 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400" />
@error('zipcode')
<div class="text-sm text-red-500 ml-1">
</div>
@enderror
</div>
</div>
<div class="mt-4 divide-y-2 divide-blue-800 divide-solid">
<div></div>
<div></div>
</div>
<div class="mt-2">
<label class="pl-1 pt-2 block font-bold text-sm text-black-700" for="email">
Email Address:
</label>
<input wire:model="email" type="text"
class="text-sm sm:text-base pl-2 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400" />
@error('email')
<div class="text-sm text-red-500 ml-1">
</div>
@enderror
</div>
</div>
<div class="grid grid-cols-3 gap-4">
<div>
<label class="pl-1 pt-2 block font-bold text-sm text-black-700" for="home_phone">
Home Phone:
</label>
<input wire:model="home_phone" type="text"
class="text-sm sm:text-base pl-2 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400" />
@error('home_phone')
<div class="text-sm text-red-500 ml-1">
</div>
@enderror
</div>
<div>
<label class="pl-1 pt-2 block font-bold text-sm text-black-700" for="bus_phone">
Business Phone:
</label>
<input wire:model="bus_phone" type="text"
class="text-sm sm:text-base pl-2 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400" />
@error('bus_phone')
<div class="text-sm text-red-500 ml-1">
</div>
@enderror
</div>
<div>
<label class="pl-1 pt-2 block font-bold text-sm text-black-700" for="cell_phone">
Cell Phone:
</label>
<input wire:model="cell_phone" type="text"
class="text-sm sm:text-base pl-2 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400" />
@error('cell_phone')
<div class="text-sm text-red-500 ml-1">
</div>
@enderror
</div>
</div>
</div>
<div class="flex mt-5">
<div class="w-2/6">
<button wire:click="update"
class="btn inline-flex justify-center px-2 py-2 border border-transparent rounded-md font-semibold text-sm text-white uppercase bg-green-600 hover:bg-green-800 active:bg-green-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray disabled:opacity-25 transition ease-in-out duration-150">
Update</button>
</div>
<div class="w-4/6 text-lg text-left">
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
</div>
</div>
</div>
</div>
</div>
Level 2
Thanks for your response..... I figured it out... I had extended the layouts in the component and that was doubling them up. It displayed but any livewire item would not work. Just deleted the below items and it works again. Always the tiny details that get you ...LOL
Please or to participate in this conversation.