Livewire Development Tutorials, Guides & Insights

• Capture browser events dispatched from the Livewire PHP side:

   window.addEventListener('eventName', event => {
       console.log('Browser event received:', event.detail);
   });

Open EditorComponent.php and define the necessary properties and methods to handle content updates.

    namespace App\Http\Livewire;

    use Livewire\Component;

    class EditorComponent extends Component
    {
        public $content = '';

        protected $listeners = ['updateContent'];

        public function updateContent($wireId, $newContent)
        {
            $this->content = $newContent;
        }

        public function render()
        {
            return view('livewire.editor-component');
        }
    }

First, let's create a Livewire component to handle our search functionality.

Run the following command to generate a Livewire component:

Open the newly created DynamicForm.php file and set up the properties and methods to manage the form fields:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class DynamicForm extends Component
{
    public $selectedCategory = null;
    public $subcategories = [];

    public function updatedSelectedCategory($category)
    {
        $this->subcategories = $this->getSubcategories($category);
    }

    public function getSubcategories($category)
    {
        // This is where you'd fetch subcategories from the database or an API based on the category
        $subcategoriesData = [
            'technology' => ['Web Development', 'Mobile Development', 'AI & ML'],
            'business' => ['Marketing', 'Finance', 'Entrepreneurship'],
            'design' => ['Graphic Design', 'UI/UX Design', '3D Modeling']
        ];

        return $subcategoriesData[$category] ?? [];
    }

    public function render()
    {
        return view('livewire.dynamic-form', [
            'categories' => ['technology', 'business', 'design']
        ]);
    }
}

Add a script to listen for the custom events emitted by Livewire and open the modals accordingly.

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Listen for the custom 'open-modal' event
        window.addEventListener('open-modal', event => {
            const modalId = event.detail.modalId;
            const modalElement = document.getElementById(modalId);
            if (modalElement) {
                modalElement.classList.remove('hidden');
            }
        });

        // Close modal logic
        document.querySelectorAll('[data-modal-hide]').forEach(button => {
            button.addEventListener('click', function () {
                const modalId = this.getAttribute('data-modal-hide');
                const modalElement = document.getElementById(modalId);
                if (modalElement) {
                    modalElement.classList.add('hidden');
                }
            });
        });
    });
</script>