我有两个组件 Posts 和 Post，Posts 显示帖子，通过单击图像，我想在另一个组件中显示单击的帖子的数据。
在下面发布类和组件：
组件视图：
<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');
}
}
这是我想在这个组件中显示点击数据的Post 组件和类，我已经尝试过 $emit 和许多文档，但没有结果。
我要呈现该数据的组件视图：
<div x-show="open">
<h1>{{ $post->name …我可以将数据传递给组件，但在 Alpine js 的模态中，数据为空。
这是类：
public $code, $products;
public function getData($id)
{
$product = Product::find($id);
$this->code = $product->code;
}
public function render()
{
$this->products = Product::latest()->get();
return view('livewire.cabin');
}
这是组件：
<div x-data="{open: false}">
<section>
if I use $code here the code value is shown !!!
<div>{{ $code }}</div>
<div class="slideCabin">
@foreach($products as $product)
<div>
<img
@click="open = true"
wire:click="getData({{ $product->id }})"
src="/images/allproducts/{{ $product->cover }}"
>
</div>
@endforeach
</div>
</section>
这是由 Alpine js 通过点击标签打开的模式：
<div id="backmodal" x-show="open">
but, the code value …有一个带有标签的 div，通过单击小图像我可以更改 src 属性并显示它的原始大小，但我不知道在 Alpine js 中该怎么做？
<div>
<img id="main" />
</div>
/* small images from db */
<div>
foreach($images as $image){
<img id='small' src="images/.$image" />
}
</div>
在 jquery 中：
$("#small").each(function(){
$(this).click(function(){
$("#main").attr('src', $(this).attr('src');)
})
})
})
但我不知道在 Alpine js 中该怎么做？！
我拥有将next.js框架添加到Laravel的功能。
我怎样才能像添加带有预设的React一样将next.js添加到laravel中并进行纠正？