Livewire wire:click在Alpine.js x-data指令内无法触发问题

环境配置详情 #

routes/web.php #

Route::get('/product/{slug}', [ProductController::class, 'show'])->name('product.show');

app/Http/Controllers/ProductController.php #

public function show($slug)
{
    // 获取产品及关联产品数据
    // 将产品及关联产品传递到视图
    return view('pages.products.show', compact('product', 'products'));
}

resources/views/pages/products/show.blade.php #

@extends('layouts.default')
@section('title', $product->model)
@section('content')
    @livewire('button', ['product' => $product])
    <div class="max-w-screen-xl mx-auto p-4">
        @livewire('button', ['product' => $product])
        <div x-data="{ mainImage: '{{ $product->images->first() ? asset('img/products/' . $product->slug . '/' . $product->images->first()->filename) : asset('img/common/img-unavailable.jpg') }}' }">
            @livewire('button', ['product' => $product])
            <div class="container mx-auto px-4 py-8">
                @livewire('button', ['product' => $product])
            </div>
        </div>
        @livewire('button', ['product' => $product])
        <x-products.grid :products="$products" />
    </div>
@endsection

resources/views/livewire/button.blade.php #

<div>
    <button
        class="bg-indigo-600 flex gap-2 items-center text-white px-6 py-2 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" type="button" wire:click="clicked">
        Add to Cart
    </button>
</div>

app/Livewire/Button.php #

<?php

namespace App\Livewire;

use Barryvdh\Debugbar\Facades\Debugbar;
use Livewire\Component;

class Button extends Component
{
    public $product;

    public function mount($product)
    {
        $this->product = $product;
        Debugbar::info("Product mounted:", $this->product);
    }

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

    public function clicked()
    {
        Debugbar::info("clicked");
        Debugbar::info("Product in cart:", $this->product);
        // $this->emit('cartUpdated');
    }
}

问题现象 #

show.blade.php视图中，所有Livewire按钮均正常工作，唯有Alpine.js x-data指令内的按钮例外，即以下代码块中的两个按钮：

<div x-data="{ mainImage: '{{ $product->images->first() ? asset('img/products/' . $product->slug . '/' . $product->images->first()->filename) : asset('img/common/img-unavailable.jpg') }}' }">
    @livewire('button', ['product' => $product])
    <div class="container mx-auto px-4 py-8">
        @livewire('button', ['product' => $product])
    </div>
</div>

这些按钮的wire:click方法无法触发Livewire组件中的clicked方法，但组件的mount方法已正常调用，产品详情也已在Debugbar中记录。x-data块外的按钮点击后会正常触发AJAX请求，并在Debugbar中记录"clicked"信息。

已尝试的排查步骤 #

• 确认mount方法已调用，产品数据已正确传递给Livewire组件
• 确认wire:click方法在x-data块外可正常工作
• 检查浏览器控制台无JavaScript错误

内容的提问来源于stack exchange，提问作者Garfield