I'm using extends in Laravel Livewire.
It can display, but when I want to add or change data, I got an error.
Livewire encountered corrupt data when trying to hydrate the [crud.add-student-component] component. Ensure that the [name, id, data] of the Livewire component wasn't tampered with between requests.
So I do solution from this Livewire encountered corrupt data when trying to hydrate the … component to change public to protected.
Then I got the error that I don't have a public property.
Unable to set component data. Public property [$name] not found on component: [crud.add-student-component]
This is in the blade.
@extends('components.hide')
@section('add')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.text-center{
}
.container{
display: flex;
flex-direction: row;
width: 200%;
}
</style>
</head>
<body>
<div>
{{-- @extends('livewire.crud.edit-student-component') --}}
{{-- @extends('livewire.crud.index-component') --}}
<div class="container">
<div class="row justify-content-center mt-5">
<div class="col-md-5">
<div class="card">
<div class="card-header">
<h5 class="card-title">Add New Student</h5>
<a href="{{ route('students') }}" class="btn btn-sm btn-primary" enctype="multipart/form-data" style="float:right;">All Students</a>
</div>
<div class="card-body">
@if (session()->has('message'))
<div class="alert alert-success text-center">{{ session ('message') }}</div>
@endif
<form wire:submit.prevent="storeStudent">
<div class="form-group">
<label for="student_id">Student ID</label>
<input type="number" class="form-control" wire:model="student_id"/>
{{-- this is validation --}}
@error('student_id')
<span class="text-danger" style="font-size: 12.5px;">{{ $message }}</span>
@enderror
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" wire:model="name"/>
{{-- this is validation --}}
@error('name')
<span class="text-danger" style="font-size: 12.5px;">{{ $message }}</span>
@enderror
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" wire:model="email"/>
{{-- this is validation --}}
@error('email')
<span class="text-danger" style="font-size: 12.5px;">{{ $message }}</span>
@enderror
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="number" class="form-control" wire:model="phone"/>
{{-- this is validation --}}
@error('phone')
<span class="text-danger" style="font-size: 12.5px;">{{ $message }}</span>
@enderror
</div>
<div class="form-group">
<label for="image">Image</label>
<input type="file" name="image" class="form-control" wire:model="image"/>
{{-- this is validation --}}
@error('image')
<span class="text-danger" style="font-size: 12.5px;">{{ $message }}</span>
@enderror
</div>
<div class="form-group">
<label for="birth">Birth</label>
<input type="datetime" id="datepickerlink"
class="form-control" wire:model="birth"/>
{{-- this is validation --}}
@error('birth')
<span class="text-danger" style="font-size: 12.5px;">{{ $message }}</span>
@enderror
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-primary btn-sm w-50">Add Student</button>
</div>
<link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css">
<script src="dist/js/datepicker.min.js"></script>
<!-- Include English language -->
<script src="dist/js/i18n/datepicker.en.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
flatpickr("input[type='datetime']", {});
</script>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
@endsection
This in the controller.
<?php
namespace App\Http\Livewire\Crud;
use App\Models\Student;
use Illuminate\Support\Facades\Auth;
use Livewire\WithFileUploads;
use Livewire\Component;
class AddStudentComponent extends Component
{
use WithFileUploads;
//change form public to protected
protected $student_id, $name, $email, $phone, $birth, $image, $students, $user_id;
public function field()
{
$this->validateOnly( [
'student_id' => 'required|unique:students',
'name' => 'required',
'email' => 'required|email|unique:students',
'phone' => 'required|numeric|unique:students',
'image' => 'required|image|:students',
'birth' => 'required|:students',
]);
dd($this->image);
if(!empty($this->image)){
$this->image->store('public/image');
dd($this->image);
}
$user_id = Auth::user()->id;
$student = new Student();
$student->student_id = $this->student_id;
$student->name = $this->name;
$student->email = $this->email;
$student->phone = $this->phone;
$student->image = $this->image;
$student->birth = $this->birth;
$student->save();
session()->flash('message', 'Student has been added successfully');
$this->student_id = '';
$this->name = '';
$this->email = '';
$this->phone = '';
$this->image = '';
$this->birth = '';
}
public function storeStudent(){
$this->validate([
'student_id' => 'required|unique:students',
'name' => 'required',
'email' => 'required|email|unique:students',
'phone' => 'required|numeric|unique:students',
'image' => 'required|unique:students',
'birth' => 'required|:students',
]);
//
$user_id = Auth::user()->id;
$student = new Student();
$student->student_id = $this->student_id;
$student->name = $this->name;
$student->email = $this->email;
$student->phone = $this->phone;
$student->image = $this->image;
$student->birth = $this->birth;
//
// if(!empty($this->image)){
// $this->image->store('public/image');
$student->user_id = $user_id;
//
$student->image = $this->image->store('image');
$student->save();
session()->flash('message', 'Student has been added successfully');
$this->student_id = '';
$this->name = '';
$this->email = '';
$this->phone = '';
$this->image = '';
$this->birth = '';
}
public function render()
{
//adding this from index-component 18/4/22
$user_id = Auth::user()->id;
$students = Student::where('user_id', $user_id);
//
return view('livewire.crud.add-student-component');
}
}
This is in the blade extends.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.header {
background-color:#FF8C32;
height: 100px;
display: flex;
flex-direction: row;
text-align: center;
}
h5 {
height: 50px;
}
.main {
background-color: #EEEEEE;
height: 600px;
display: flex;
flex-direction: row;
}
.footer {
background-color: #06113C ;
height: 80px;
text-align: center;
}
.slideleft {
width: 200px;
top: 100;
left: 0;
bottom: 80;
/* height: 600px; */
background-color: #DDDDDD;
padding-top: 20px;
padding-bottom: 5px;
}
.slideleft tbody {
flex-direction: column-reverse;
}
.header h5 {
float: right;
height: 20px;
}
.center {
display: flex;
flex-direction: row;
width: 50px;
}
.logo img{
padding-top: 10px;
}
.note{
/* place-items: center; */
/* margin: auto; */
/* text-align: center; */
padding: 30px;
color: #EEEEEE;
}
</style>
@livewireStyles
</head>
<body>
<div class="header">
<div class="logo">
<img width="80"
src="https://d29fhpw069ctt2.cloudfront.net/icon/image/39129/preview.png"
alt="picture phonebook">
</div>
<div>
<h5>Addres Book</h5>
</div>
</div>
<div class="main">
<div class="slideleft">
<div class="upper">
<a href="{{ route('addstudents') }}" class="btn btn-sm btn-primary" style="text-align: center;">
<button>Add New Contact</button>
</a>
</div>
{{-- {{ dd($students ?? '') }} --}}
{{-- @dd($students) --}}
{{-- <tbody>
@if ($students->count() > 0)
@foreach ($students as $student)
<tr>
<a href="{{ route ('editstudents', ['id' => $student->id]) }}" wire:click="$emit('showedit')" class="btn btn-sm btn-secondary"
style="padding: 1px 8px;">
<td>{{ $student->name }}</td>
</a>
</tr>
@endforeach
@else
<tr>
<td colspan="5" style="text-align: center;">No students found!</td>
</tr>
@endif
</tbody> --}}
<p>test</p>
</div>
<div class="center">
<h1>check</h1>
@yield('add')
@yield('edit')
</div>
</div>
<div class="footer">
<div class="note">
© All rights reserved
</div>
</div>
@livewireScripts
any idea? hopefully you can answer this to help my struggle
