6

I am trying to use Laravel 8 Livewire Modal Popup for data entry with going on another page. But I get undefine the variable _instance and not able to understand it.

@entangle($attributes->wire('model'))

This line creates this error when I remove this from views/vendor/jetstream/components/modal.blade.php. the error will go.

Line no 34.

<div id="<?php echo e($id); ?>" x-data="{ show: <?php if ((object) ($attributes->wire('model')) instanceof \Livewire\WireDirective) : ?>window.Livewire.find('<?php echo e($_instance->id); ?>').entangle('<?php echo e($attributes->wire('model')->value(

    x-show="show"

    x-on:close.stop="show = false"

    x-on:keydown.escape.window="show = false"

    class="fixed top-0 inset-x-0 px-4 pt-6 sm:px-0 sm:flex sm:items-top sm:justify-center"

    style="display: none;">
Surya Pratap
  • 59
  • 2
  • 6

2 Answers2

9

This was causing me much angst too but I think I found the solution: as @georgy-malanichev says, you can only call Livewire methods from inside a Livewire component (and not from inside a Blade component or any other custom components).

Given you are trying to use the component inside resources/views/dashboard.blade.php, the solution is to:

  1. create a livewire component using artisan make:livewire MyDashboard
  2. Cut everything between <x-app-layout> and </x-app-layout> in dashboard.blade.php and paste it into views/livewire/my-dashboard.blade.php
  3. Add @livewire('my-dashboard') inside the x-app-layout tags and Bob's your uncle (it should start working)

To help you understand what's going on, if you look at the source code for the modal component, you'll see a line like: show: @entangle($attributes->wire('model')),. I'm not sure how to describe exactly what this does, but, essentially, @entangle() is expecting an instance of the "model" Livewire object and it's not finding one.

It's not finding it because it's getting called from a non-livewire component. Once you put it inside a Livewire component, it starts working.

I hope the additional details makes things clearer.

Ted Stresen-Reuter
  • 392
  • 2
  • 13
  • 1
    Thanks. It is works! I think thats the right and ultimate solution. Need remember "Livewire methods only can be called inside a Livewire component". – steve Jan 15 '21 at 02:19
  • It works, but a warning appears. `Livewire: Multiple root elements detected. This is not supported` I don't know what the consequences could be, it's alarming. – Егор Трегубенко Nov 09 '21 at 23:08
  • I myself don't know enough about the internals of Livewire but the error message suggests that maybe you can only have one, main HTML element inside the `@livewire` directives? – Ted Stresen-Reuter Nov 10 '21 at 13:51
1

I was getting the same error but in my case it was the fact that I had x-data="{ open: @entangle('showDropdown') }" outside of the LiveWire component. Once I moved it inside the component template, where it should be, the issue went away.

Georgy Malanichev
  • 328
  • 1
  • 6