7

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;">
Improve this question
2
  • 1
    Have you ever solved it? Getting the same error. Commented Oct 26, 2020 at 22:36
  • 1
    Not Yet, I am finding it from the last 10 days. Please let me know if you will find Commented Oct 27, 2020 at 10:55

2 Answers 2

Reset to default
11

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thanks. It is works! I think thats the right and ultimate solution. Need remember "Livewire methods only can be called inside a Livewire component".
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.
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?
2

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.