I am trying to make a CRUD application using livewire to render data in the component Blade and save data to the DB there afterwards. The data is being render correctly to the livewire Blade component but when I try to save the data from the component, Livewire is rendering the blank page instead of updating the added data. Here is my code.

Employees.php

<?php

namespace App\Http\Livewire;
use App\Models\User;
use Illuminate\Support\Facades\Validator;
use Livewire\Component;
use Session;
class Employees extends Component
{
    public $name, $email, $edit=false;
    

public function resetInputFields(){
    $this->name="";
    $this->email="";
}


public function create(){
    $this->create=true;
   
}



    public function store(){
        $this->validate([
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
         ]);

        $user = User::create([
            'name' => $this->name,
            'email' => $this->email,
           ]);
          Session::flash('success', 'Employee added successfully');
          $this->resetInputFields(); 
          
    }



    public function render()
    {
      $employees = User::latest()->paginate(5);
      return view('livewire.employees',compact('employees'));
    }



    
}

And here is my employees.blade.php blade component File

<x-app-layout>
<div>
<center>
   
   <h3 style="font-weight:bold;font-size:20px">Employees List </h3>
  
         <br>      


<!--Successs for Employee Addition-->
@if (Session::has('success'))
     <div >
     {{ Session::get('success') }}
     </div>
@endif

<!-- Validation Errors -->
<x-auth-validation-errors  :errors="$errors" />

</center>
@include('livewire.create')

<br><br>
 
<div >

<hr>
<table >
  <thead>
    <tr>
      <th scope="col">NAME</th>
      <th scope="col">EMAIL</th>
      <th scope="col">ACTION</th>
           </tr>
  </thead>
  

  <tbody>
    @foreach($employees as $employee)
  <tr>

  <td>{{$employee->name}}</td>
   <td>{{$employee->email}}</td>
   <td>
     <span >Edit</span>
     <span >Delete</span>
  </td>



    </tr>
    @endforeach
  
  </tbody>
  </table>
  {{ $employees->links() }}
  
</div>
</div>
</x-app-layout>

The create.blade.php is the modal being included in employees.blade.php and it appears as.

 <center>
 <!-- Button trigger modal -->
 <button style="align-items:center"   data-toggle="modal" data-target="#exampleModal">
        Add Employees
      </button>
</center>
<!-- Modal -->
<div  id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div  role="document">
    <div >
      <div >        
        <h5  id="exampleModalLabel">Employees</h5>
        <button type="button"  data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div >
 <!--Employee Name-->
 <label for="Name">Employee Name</label>
        <input  name="name" type="text" placeholder="Employee Name" wire:model.defer="name">
  <br>
        <!--Employee Email Address-->

        <label for="Email">Employee Email</label>
        <input  type="text" name="email" placeholder="Employee Email" wire:model.defer="email">
      
      </div>


      <div >
        <button  data-dismiss="modal">Close</button>
        <button  data-dismiss="modal" wire:click.prevent="store()">Save changes</button>
      </div>
    </div>
  </div>
</div>
 

  

Now when I save data in employees.blade.php the component is only showing a flash message of success without showing the updated data. Am I missing something here?

CodePudding user response：

do you not need to redirect after the store / flash method

return redirect()->to('/render');

CodePudding user response：

So I figured out that I had two root elements. One in my app.blade.php

<div>
 
{{ $slot }} 

</div>

and another root element in my employee.blade.php as

<div>

My entire code here

</div>

So after removing one root element in my app.blade.php the template was rendered successfully.