livewire inline data edit

 

Inline data edit in laravel livewire 

 create livewire component

app\livewire\Search.php

 <?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Student;
class Search extends Component
{
    
    public $editStudentIndex=null;
    public $students=[];
 
    protected $rules=[
        'students.*.name'=> ['required'],
        'students.*.content'=> ['required'],
         ];
         public $validationAttributes=[
             'students.*.name'=>'name',
             'students.*.content'=>'content',
         ];
    public function render()
    {
         
        $this->students=Student::all();
        return view('livewire.search');
    }
   
    public function editStudent($StudentIndex)
    {
        $this->editStudentIndex=$StudentIndex;
    }
    public function saveStudent($StudentIndex)
    {
        $this->validate();

        $Student=$this->students[$StudentIndex];

        Student::find($Student['id'])->update([
            'name'=>$Student->name,
            'content'=>$Student->content,
        ]);
        $this->editStudentIndex=null;
       session()->flash('message','saved');
    }
}

livewire view/blade file

livewire/search.blade.php

<div >
    <h2>Livewire Inline Data Edit</h2>

     @if(Session::has('message'))
     <label style="color: green;font-weight: bold;">{{Session::get('message')}}</label>
     @endif

    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Content</th>
                <th>Action</th>

            </tr>
        </thead>
        <tbody>
            <?php $sl=0; ?>
            @foreach($students as $index=>$std)
            <tr>
                <td>{{ ++$sl}}</td>

                <td>@if($editStudentIndex ===$index )
                    <input type="text"  wire:model.defer="students.{{$index}}.name"  >

                @if($errors->has('students.'.$index.'.name'))
                <div style="color: red;">{{$errors->first('students.'.$index.'.name')}}</div>
            @endif
                   
                @else

                {{$std->name}}
               
            @endif
        </td>
                <td>
                    @if($editStudentIndex ===$index)

                    <input type="text" wire:model.defer="students.{{$index}}.content"  >

                @if($errors->has('students.'.$index.'.content'))
                <div style="color: red;">{{$errors->first('students.'.$index.'.content')}}</div>
            @endif
                   
                @else

                {{$std->content}}
               
            @endif
                </td>
                <td>@if($editStudentIndex === $index)

                    <button class="btn inline-flex btn-success" wire:click.prevent="saveStudent({{$index}})">Save</button>
                   
                @else
                
                <button class="btn inline-flex btn-info" wire:click.prevent="editStudent({{$index}})">Edit</button>

              @endif
                </td>

            </tr>
            @endforeach
        </tbody>
       
    </table>
</div>

view blade file 

student/search.blade.php

@extends('layouts.app')
@section('content')

<div class="container">
    @livewire('search')
</div>

@endsection

Route

 Route::view('search','student.search');