15

I have two components Posts and Post, Posts show the posts and by clicking the image I want to show the data of clicked post in another component.

Posts class and component down below:

Component View:


<div class="post" x-data="{open:false}">
  @foreach($posts as $post)
    <div>
      <h1>{{ $post->name }}</h1>
      <h3>{{ $post->body }}</h3>
      <img @click="open = !open" wire:click="showPost({{ $post->id }})" src="{{ $post->image }}" alt="">
    </div>
  @endforeach


<livewireL:post>

    </div>

Component Class: 

class Posts extends Component
{


  public $posts, $post;

  public function mount(){
    $this->posts = Post::all();

  }


  public function showPost($id){
    $post = Post::find($id);
    $this->post = $post;
  }

    public function render()
    {
        return view('livewire.posts');
    }
}

and this is the Post component and class that I want to show the clicked data in this component, I have tried $emit and many as documentation but no result.

Component view which I want to render that data:


<div x-show="open">
  <h1>{{ $post->name }}</h1>
  <h3>{{ $post->body }}</h3>
  <img src="{{ $post->image }}">
</div>

Class which I want to pass data:

class Post extends Component
{

  public $post;



  public function mount($id)
  {
    $this->post = \App\Post::find($id);
  }



    public function render()
    {
        return view('livewire.post');
    }
}
fahim152
  • 2,531
  • 1
  • 10
  • 29
Mehdi Yaghoubi
  • 561
  • 3
  • 8
  • 24

2 Answers2

21

You have to use events to pass data from one component to another component like below.

Component A Blade: 

  <img @click="open = !open" wire:click="showPost({{ $post->id }})" src="{{ $post->image }}" alt="">

Component A Class:

public function showPost($id){
    $post = Post::find($id);
    $this->post = $post;
    $this->emit('newPost', $post->id);
  }

you can now catch that event from other livewire component like this:

Component B Class:

class Post extends Component
{

  public $post;

  protected $listeners = ['newPost'];

  public function mount($id)
  {
    $this->post = \App\Post::find($id);
  }

   public function render()
   {
        return view('livewire.post');
   }

   public function newPost($postId)
   {
       // here u have the id in your other component. 
   }
}

you can achieve this other way also. You can pass the id from your component blade as well check this out.

fahim152
  • 2,531
  • 1
  • 10
  • 29
  • thank you brother, still wonder use React or Livewire in Laravel, but trying, tkx – Mehdi Yaghoubi Mar 13 '20 at 11:08
  • so did you end up with livewire? haha – CodeGuru Dec 07 '20 at 08:02
  • 5
    Livewire is good where a very minimal user interaction happens ! but when you think of large scale of application where couple thousands to millions of user will interact, you must choose react / vue in order to keep good user experience and your keep your server in good health ! – fahim152 Dec 07 '20 at 11:46
  • Is it possible to you pass an object, in stead of a string or integer? – nclsvh Aug 18 '22 at 07:13
1

you can pass anything with @js() e.g:

wire:click="myMethod( @js($myPhpVar) )"

https://laravel-livewire.com/docs/2.x/alpine-js#js-directive

Lenor
  • 1,471
  • 10
  • 19