Unable to trigger a action?

#1

I have developed a crud system using livewire and bootstrap modal. But I have a problem with edit and delete button action.

<?php

namespace App\Http\Livewire\Admin\Post;

use App\Models\Post;
use Livewire\Component;
use Livewire\WithPagination;

class Posts extends Component
{
	use WithPagination;

	public $headerTitle, $label, $title, $description;

	public function mount($headerTitle, $label)
	{
		$this->fill([
			'headerTitle' => $headerTitle,
			'label' => $label,
		]);
	}

	private function resetInputs()
	{
		$this->title = '';

		$this->description = '';
	}

	public function addPost()
	{
		$this->validate([
			'title' => ['required', 'min:8']
		]);

		Post::create([
			'title' => $this->title,
			'description' => $this->description
		]);
		
		$this->resetInputs();

		$this->resetPage();
		
		$this->emit('postUpdated');
	}

	public function deletePost($id)
	{
		Post::where('id', $id)->delete();

		$this->resetPage();
	}

    public function render()
    {
        return view('livewire.admin.post.posts', [
        	'posts' => Post::paginate(10)
        ]);
    }
}

My livewire component view

<div wire:ignore.self class="modal fade" id="postModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Post</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form wire:submit.prevent="addPost">
          <div class="modal-body">
                <div class="form-group">
                    <label for="title">@lang('Title')</label>
                    <input type="text" wire:model="title" class="form-control @error('title') is-invalid @enderror">

                    @error('title')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="description">@lang('Description')</label>
                    <textarea class="form-control" wire:model="description"></textarea>
                </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-primary">Save</button>
          </div>
      </form>
    </div>
  </div>
</div>

<div class="card card-primary">
	<div class="card-header">
		<h3 class="card-title">{{ $headerTitle }}</h3>
    </div>

    <div class="card-body">
    	<table class="table table-bordered">
    		<thead>
    			<tr>
    				@foreach($label as $val)
    					<th>{{ $val }}</th>
    				@endforeach
                </tr>
            </thead>
            <tbody>
            	@forelse($posts as $post)
	            	<tr>
	            		<td>{{ $post->id }}</td>
	                    <td>{{ $post->title }}</td>
	                    <td>
	                    	<a wire:click.prevent="editPost('{{ $post->id }}')" href="javascript:;" class="btn btn-sm btn-flat btn-success">@lang('Edit')</a>
	                    	<a wire:click.prevent="deletePost('{{ $post->id }}')" href="javascript:;" class="btn btn-sm btn-flat btn-danger">@lang('Delete')</a>
	                    </td>
	                </tr>
	            @empty
                    <tr>
                        <td colspan="3">@lang('No record found.')</td>
                    </tr>
                @endforelse      
            </tbody>
        </table>
    </div>
    <div class="card-footer clearfix">
    	{{ $posts->links() }}
    </div>
</div>

addPost action works perfectly but edit and delete doesn’t trigger and work.

#2

I created a quick Laravel playground of the basic problem:

This worked as expected.

Have you tried doing a dd($id) inside the deletePost method?

#3

My problem is edit button and delete button event not working.