@entangle initial state is always set to true on view side inside <x-jet-dialog-modal>

#1

Hi,

I was wondering what could be the reason that @entangle value is always true on view side when the page is loaded. The behavior is normal when we change the value. The divs are inside the . If I extract them out @entangle normal from the initialization. To compensate for that i used x-init="show = @this.dshow"

Test.php


...
class Test extends Component
{
     public $dshow = false;
     ....
}

view.blade.php

<x-jet-dialog-modal>
    ...
   <x-slot name="content">
          <div style="max-height: 70vh">
                <div x-data="{ show : @entangle('dshow') }">
                     <label>
                         <input type="checkbox" value="1" wire:model="dshow" />
                         Check me
                     </label>
                     <div x-show="show">
                         This will be shown after you check abve
                     </div>
               </div>
          </div>
   </x-slot>
</x-jet-dialog-modal>

The above will not hide the div on load, but after we check and then uncheck the div is toggled as I wanted. I used x-init to force initial state. What could possibly be the reason? Is it a bug?

#2

Hey, @uurrahman
You are actually initiated the state of the dialog modal inside the dialog itself and this is not right.

If you want to initiate a state (e.g <div>) you should set the state outside it.

For example:

<div x-data="{show: @entangle('dshow')}">
  <x-jet-dialog-modal>
     ....
   </x-jet-dialog-moal>
</div>

Or you can do the following

For example, you have an object you want to be deleted.

    <button class="text-red-400 font-bold"
             wire:click="$set('confirmingObjectDeletion', {{$id}})">
            Delete
    </button>
    <x-jet-dialog-modal wire:model="confirmingObjectDeletion">
        <x-slot name="title">
            {{ __('Delete') }}
        </x-slot>

        <x-slot name="content">
            {{ __('Are you sure you want to delete this?') }}
        </x-slot>

        <x-slot name="footer">
            <x-jet-secondary-button wire:click="$set('confirmingObjectDeletion', null)"
                    wire:loading.attr="disabled">
                    {{ __('Nevermind') }}
            </x-jet-secondary-button>
            <x-jet-danger-button wire:click="deleteObject"
                    wire:loading.attr="disabled">
                    {{ __('Delete') }}
            </x-jet-danger-button>
        </x-slot>


    </x-jet-dialog-modal>

And In your component

...
    public $confirmingObjectDeletion;

    public function deleteObject()
   {
       ...
        $this->confirmingObjectDeletion = null;
   }

P.S: in this case you are using jet-stream modal component.

#3

Thank you for your reply @skywalker the first option you suggested didn’t work because (I THINK) the will isolated the scope, and the show variable was not be visible to any div inside the modal tags in my case.

<div x-data="{show: @entangle('dshow')}">
  <x-jet-dialog-modal>
       <div class="overflow-y-scroll" style="max-height: 70vh">
            <div>  <!-- set the x-data before here -->
                   <div x-show="show" >blah blah blah</show> <!-- will complain about the variable -->
            </div>
           
       </div
   </x-jet-dialog-moal>
</div>

P.S I am not trying to display the <x-jet-modal> I am trying to display div inside the modal. e.g if you would want to display a date field if a checkbox expired is checked.

#4

Aha!, I got you.

Do not set a value to your checkbox by default, let livewire data binding decide.

    <input type="checkbox"  wire:model="dshow" />

Here you are setting the checkbox value to 1 value="1", automatically dshow become true in this case.

#5

has no effect at all!

#6

Try to print the value of dshow above or under the input to see the values of it changing or not

#7

The value is false. An interesting thing happens when it is set to true. initially it displays 1 and no effect on the entangled property but when the value is unchecked the value is appended to the one displayed like 01 the 1 always stays there.

I have tried all… :rofl:

#8

That’s weird man :sweat_smile:

I found some issues related to @etangle in livewire repo like this one. Try to change the livewire version and see if it works.