Livewire 动作上的 Tailwind Flowbite 模态问题

Question

我很难将 Flowbite 的模态与 Livewire 结合使用。我有一个 Blade 视图 restaurants.index 呈现 x-layout Blade 组件，调用 <livewire:restaurants/> 组件，以及创建新资源的模式。 (restaunts.index view code)

livewire:restaurants/视图组件有如下code，而Restaurantsclass组件有如下内容

class Restaurants extends Component
{
    use WithPagination;

    public $categories;
    protected $restaurants;

    public function delete($id)
    {
        Restaurant::find($id)->delete();
    }

    public function render()
    {
        $this->categories = Category::where('type', 'Restaurant')->get();
        $this->db_restaurants = Restaurant::all();
        $google_places_api = new PlacesApi(env('GOOGLE_MAPS_API_KEY'));
        $restaurantsGooglePlacesResponse = array();

        foreach ($this->db_restaurants as $restaurant) {
            $response = $google_places_api->placeDetails($restaurant->google_place_id);
            $details = $response['result'];
            $photo_reference = array_shift($details['photos'])['photo_reference'];
            $photo_url = $google_places_api->photo($photo_reference, $params = ['maxheight' => 400, 'maxwidth' => 400]);
            $details['photo_url'] = $photo_url;
            $details['internal_restaurant_id'] = $restaurant->id;
            $details['internal_created_at'] = $restaurant->created_at;
            array_push($restaurantsGooglePlacesResponse, $details);
        }

        $this->restaurants = collect($restaurantsGooglePlacesResponse)->paginate(8);

        return view('livewire.restaurants', ['restaurants' => $this->restaurants]);
    }
}

我面临的问题是，在第一页加载时，三个模式中的每一个都显示并正常工作。尽管如此，当我执行 Livewire 操作（例如，通过 delete() 方法删除记录）时，模态要么完全停止工作，要么即使工作，也没有适当呈现（例如，生成在左上角页面）。

这似乎是由 Livewire 引起的异常行为。您知道导致此问题的原因以及解决方法吗？

Answer 1

你可以做的是放置一个按钮来处理这个问题，然后在那个事件上，你可以使用 JS 单击切换模式按钮，然后调用一个方法来完成你的工作想做。

Livewire 动作上的 Tailwind Flowbite 模态问题

Tailwind Flowbite modal issues on Livewire action

modal-dialog

laravel

tailwind-css

laravel-livewire

flowbite