laravel livewire, как передать идентификатор или данные другому компоненту щелчком мыши

У меня есть два компонента: «Сообщения» и «Сообщение»: «Сообщения» показывают сообщения, и, щелкнув изображение, я хочу отобразить данные о выбранном сообщении в другом компоненте.

Класс и компонент сообщений внизу:

Компонентное представление:


<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>

Класс компонента:

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');
    }
}

и это компонент и класс публикации, которые я хочу показать в этом компоненте, по которым щелкнули данные, я пробовал $ emit и многие другие в качестве документации, но безрезультатно.

Представление компонента, которое я хочу отобразить эти данные:


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

Класс, в который я хочу передать данные:

class Post extends Component
{

  public $post;



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



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

laravel laravel-livewire
person Mehdi Yaghoubi    schedule 12.03.2020    source источник

Ответы (1)


arrow_upward
9
arrow_downward

Вы должны использовать события для передачи данных от одного компонента другому компоненту, как показано ниже.

Компонент A лезвие:

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

Компонент А Класс:

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

Теперь вы можете поймать это событие из другого компонента livewire следующим образом:

Компонент B класса:

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. 
   }
}

вы можете добиться этого и другим способом. Вы можете передать идентификатор из колонки компонента, а также проверить это.

person fahim152    schedule 13.03.2020
comment
спасибо, брат, все еще интересно использовать React или Livewire в Laravel, но пытаюсь, tkx - person Mehdi Yaghoubi; 13.03.2020
comment
так у тебя получился livewire? ха-ха - person CodeGuru; 07.12.2020
comment
Livewire хорош там, где требуется минимальное взаимодействие с пользователем! но когда вы думаете о крупномасштабном приложении, в котором будут взаимодействовать от нескольких тысяч до миллионов пользователей, вы должны выбрать response / vue, чтобы поддерживать хорошее взаимодействие с пользователем и поддерживать ваш сервер в хорошем состоянии! - person fahim152; 07.12.2020