diff --git a/js/wire-extender.js b/js/wire-extender.js index d0b9bbb..bdb7543 100644 --- a/js/wire-extender.js +++ b/js/wire-extender.js @@ -90,7 +90,7 @@ function renderComponents(components) .then(response => response.json()) .then(data => { for (let component in data.components) { - let el = document.querySelector(`[data-component-id="${component}"]`); + let el = document.querySelector(`[data-component-key="${component}"]`); el.innerHTML = data.components[component]; } @@ -103,12 +103,12 @@ document.addEventListener('DOMContentLoaded', function() { let components = []; document.querySelectorAll('livewire').forEach((el) => { - if (!el.hasAttribute('data-component-id')) { - el.setAttribute('data-component-id', Math.random().toString(36).substring(2)); + if (!el.hasAttribute('data-component-key')) { + el.setAttribute('data-component-key', Math.random().toString(36).substring(2)); } components.push({ - id: el.getAttribute('data-component-id'), + key: el.getAttribute('data-component-key'), name: el.getAttribute('data-component'), params: el.getAttribute('data-params') }); diff --git a/src/Http/Controllers/EmbedController.php b/src/Http/Controllers/EmbedController.php index 21a08d5..3e9dcd1 100644 --- a/src/Http/Controllers/EmbedController.php +++ b/src/Http/Controllers/EmbedController.php @@ -12,7 +12,7 @@ class EmbedController public function __invoke(Request $request) { $components = collect($request->json('components', []))->mapWithKeys(function ($component) { - $componentId = $component['id']; + $componentKey = $component['key']; $componentName = $component['name']; $componentParams = json_decode($component['params'], true) ?? []; @@ -21,7 +21,8 @@ public function __invoke(Request $request) } return [ - $componentId => Blade::render('@livewire($component, $params)', [ + $componentKey => Blade::render('@livewire($component, $params, key($key))', [ + 'key' => $componentKey, 'component' => $componentName, 'params' => $componentParams, ]),