Menu
I want to do a SPA with laravel livewire, i want to use wire:click to fire a funtion in the component but it not working , excuse me if the code mess its my first time posting here and i am not sure of what to post here of my code to make these problem solve thank you
main.blade.php
@section('content')
<div>
<div class="row justify-content-center">
<div class="col-12">
<div class="card my-3">
<!-- header -->
<div class="card-header d-inline-flex">
<h3 class='mr-2'>Categories</h3>
<div>
<a href="javascript:void(0);" wire:click='createCategory' class="btn btn-success ">Add NewCategory</a>
</div>
</div><!-- header -->
<div class="card-body">
<!-- alerts -->
@include('admin.includes.alerts.errors')
@include('admin.includes.alerts.success')
<!-- alerts -->
<!-- if True , create form will show , if not will stay disabled -->
@if ($showCreateForm)
@livewire('admin.category.create' )
@endif
<!-- if True , create form will show , if not will stay disabled -->
<!-- Table -->
<div class="table-responsive">
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>Image</th>
<th>Name</th>
<th>Slug</th>
<th>Status</th>
<th>Parent</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach ($categories as $category)
<tr>
<td>{{$category->id}}</td>
{{-- <td>{{storage_path(app\livewire-tmp\$category->image)}}" /></td> --}}
<td>{{$category->name}}</td>
<td>{{$category->slug}}</td>
<td class=" {{$category->isActive()==='Active'? 'text-success':'text-danger'}}">
{{$category->isActive()}}</td>
<td>{{ !empty($category->parent) ? $category->parent->name:'' }}</td>
<td>
<a href="" class="btn btn-warning">Edit</a>
<a href="" class="btn btn-danger">Delete</a>
</td>
</tr>
@endforeach
</tbody>
<tfoot>
<tr>
<th>ID</th>
<th>Image</th>
<th>Name</th>
<th>Slug</th>
<th>Status</th>
<th>Parent</th>
<th>Action</th>
</tr>
</tfoot>
</table>
<div>
{!!$categories->links()!!}
</div>
</div>
<!-- Table -->
</div><!-- body -->
</div>
</div>
</div>
</div>
@endsection
and The Component Main.php ,
<?php
namespace App\Http\Livewire\Admin\Category;
use App\Models\Admin\Category;
use Livewire\Component;
use Livewire\WithPagination;
class Main extends Component
{
use WithPagination;
protected $categories;
public $showCreateForm = false;
public $showEditForm = false;
public function render()
{
$categories = Category::orderBy('id','desc')->paginate(12);
return view('livewire.admin.category.main',[
'categories' => $categories,
]) ->layout('layouts.admin');
}
public function createCategory()
{
$this->showCreateForm = !$this->showCreateForm;
}
public function update_Category($id)
{
$categories = Category::whereId($id);
if ($categories) {
$this->emit('getCategoryid' , $categories);
$this->showEditForm = !$this->showEditForm;
$this->showCreateForm = false;
}
}
public function delete_Category($id)
{
$this->showCreateForm = !$this->showCreateForm;
}
}
i tried iRestWeb Answer, I think it the right answer but i dont even understand what happening its 100% javascript related and its not my field of expertise , so here's my full code i hope some one understand , and again sorry if my code messy and give you hard time , thank youu.
create.blade.php
<div>
<form role="form" wire:submit.prevent="create" method="POST" enctype="multipart/form-data">
@csrf
<div class="card-body">
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="exampleInputEmail1">Parent</label>
<select type="select" class="form-control" id="exampleInputEmail1" wire:model="parent_id" name="parent_id">
<option selected value> -- select an option -- </option>
{{-- @if (is_array($categories) || is_object($categories) || !empty($categories)) --}} @foreach ($categories as $category)
<option value="{{$category->id}}">{{$category->name}}</option>
@endforeach {{-- @endif --}}
</select>
</div>
</div>
<!-- 1 -->
<div class="col-6">
<div class="form-group">
<label for="exampleInputPassword1">Category Name</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" wire:model="name" name="name"> @error('name') <span class="error text-danger">{{ $message }}</span> @enderror
</div>
</div>
<!-- 2 -->
<div class="col-6">
<div class="form-group">
<label for="exampleInputPassword1">Slug Name</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" wire:model="slug" name="slug"> @error('slug') <span class="error text-danger">{{ $message }}</span> @enderror
</div>
</div>
<!-- 3 -->
<div class="col-6">
<div class="form-group">
<label for="exampleFormControlFile1">Image</label>
<input type="file" wire:model="image" class="form-control-file" id="exampleFormControlFile1" name="image"> @error('image') <span class="error text-danger">{{ $message }}</span> @enderror
</div>
</div>
<!-- 4 -->
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" wire:model="is_active" name="is_active">
<label class="form-check-label" for="exampleCheck1">is Active</label> @error('is_active') <span class="error text-danger">{{ $message }}</span> @enderror
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>Create.php
<?php
namespace App\Http\Livewire\Admin\Category;
use Livewire\Component;
use App\Models\Admin\Category;
use Livewire\WithFileUploads;
use Illuminate\Support\Str;
use Livewire\WithPagination;
use Intervention\Image\Facades\Image;
class Create extends Component
{
use WithFileUploads;
use WithPagination;
public $slug , $name , $image , $parent_id , $is_active;
protected $rules = [
'slug' => 'required|unique:categories,slug',
'name' => 'required',
'image'=> 'nullable|image|max:1024'
];
protected $categories;
public function render()
{
$categories = Category::orderBy('id','desc')->paginate(12);
return view('livewire.admin.category.create' , [
'categories' => $categories,
]);
}
public function create()
{
$this->validate();
$data = [
'name' => $this->name,
'slug' => $this->slug,
'is_active'=> $this->is_active,
'image'=> $this->image,
'parent_id'=> $this->parent_id,
];
//image upload
try {
if ($image = $this->image) {
$filename = Str::slug($this->name).'.'.$image->getClientOriginalExtension();
$path = public_path('assets/image/'.$filename);
Image::make($image->getRealPath())->save($path,100);
}
Category::create($data);
$this->reset();
return $this->addError('success' , 'Created Successfuly');
} catch (\Throwable $th) {
return $this->addError('error', 'Something Wrong Happens');
}
}
}edit.blade.php
<div>
<form role="form" method="POST" enctype="multipart/form-data" wire:submit.prevent="update">
@csrf
<div class="card-body">
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="exampleInputEmail1">Parent</label>
<select type="select" class="form-control" id="exampleInputEmail1" wire:model="parent_id" name="parent_id">
<option></option>
{{-- @if (is_array($categories) || is_object($categories) || !empty($categories)) --}} @foreach ($categories as $category)
<option value="{{$category->id}}">{{$category->name}}</option>
@endforeach {{-- @endif --}}
</select>
</div>
</div>
<!-- 1 -->
<div class="col-6">
<div class="form-group">
<label for="exampleInputPassword1">Category Name</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" wire:model="name" value='{{$category->name}}' name="name"> @error('name') <span class="error text-danger">{{ $message }}</span> @enderror
</div>
</div>
<!-- 2 -->
<div class="col-6">
<div class="form-group">
<label for="exampleInputPassword1">Slug Name</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" wire:model="slug" name="slug" value='{{$category->slug}}'> @error('slug') <span class="error text-danger">{{ $message }}</span> @enderror
</div>
</div>
<!-- 3 -->
<div class="col-6">
<div class="form-group">
<label for="exampleFormControlFile1">Image</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1" name="image">
<img value='{{$category->image}}' alt="" srcset=""> @error('image') <span class="error text-danger">{{ $message }}</span> @enderror
</div>
</div>
<!-- 4 -->
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" wire:model="is_active" name="is_active">
<label class="form-check-label" for="exampleCheck1">is Active</label> @error('is_active') <span class="error text-danger">{{ $message }}</span> @enderror
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>Edit.php (uncompleted Task)
<?php
namespace App\Http\Livewire\Admin\Category;
use Livewire\Component;
use App\Models\Admin\Category;
class Edit extends Component
{
protected $categories , $cat_id;
public $slug , $name , $image , $old_image , $parent_id , $is_active;
protected $listeners = ['getCategoryid'=>'getID'];
public function mount()
{
$this->categories = Category::whereId($this->cat_id)->first();
}//mout
public function render()
{
$categories = Category::all();
return view('livewire.admin.category.edit' , [
'categories' => $categories,
]);
}//render
public function update($id)
{
}//update
public function getID($categories)
{
$this->categories = $categories;
// Data
$this->slug = $this->$categories['slug'];
$this->name = $this->$categories['name'];
$this->image = $this->$categories['image'];
$this->old_image = $this->$categories['old_image'];
$this->parent_id = $this->$categories['parent_id'];
$this->is_active = $this->$categories['is_active'];
}//getID
}
376
So, if you are working with Laravel Livewire and you have wire:click in your template which should call a function in the component. But it is not working, and you have tried everything.
You didn’t have all of your div tags closed, and livewire usually needs an empty div surrounding everything. I think you’ll have some fighting to do for livewire to update the item qty, but try this in your component blade view and you should be able to see the livewire requests back to the component methods fixed cart.blade
As a final measure, adding wire:key will directly tell Livewire how to keep track of a DOM element. Over-using this attribute is a smell, but it is very useful and powerful for problems of this nature.
For the most part, this system is reliable, but there are certain cases where Livewire is unable to properly track changes. When this happens, hopefully, a helpful error will be thrown and you can debug with the following guide. Add wire:key. As a final measure, adding wire:key will directly tell Livewire how to keep track of a DOM element.
All HTML code should be covered with single <div>. Then it will work.
92
answered Oct 24 '22 18:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
