blog/embracing-the-love-between-livewire-and-alpine

[utterances-bot]

Rappasoft | Blog | Embracing the love between Livewire and Alpine

Building with new tools is hard, especially when it goes against what you've learned about the client and server in the past. Livewire and Alpine are built for each other and here's how you make the most of that relationship.

https://rappasoft.com/blog/embracing-the-love-between-livewire-and-alpine

[danielreales7]

Hi Anthony, I'm having a problem when trying to call a specific Livewire component from Alpine. I have in a link: x-data="{}" x-on:click="window.livewire.emitTo('colaboradores', 'show');" but it doesn´t work. In console I don't have errors. What could be the problem? Thank you so much!

[rappasoft]

Hi Anthony, I'm having a problem when trying to call a specific Livewire component from Alpine. I have in a link: x-data="{}" x-on:click="window.livewire.emitTo('colaboradores', 'show');" but it doesn´t work. In console I don't have errors. What could be the problem? Thank you so much!

Do you have access to $wire or @entangle?

[danielreales7]

Hi Anthony, I'm having a problem when trying to call a specific Livewire component from Alpine. I have in a link: x-data="{}" x-on:click="window.livewire.emitTo('colaboradores', 'show');" but it doesn´t work. In console I don't have errors. What could be the problem? Thank you so much!

Do you have access to $wire or @entangle?

I use this in a simple blade so I can't use $wire or @entangle.

This is the Colaboradores Component and extend from Modal.

After in the blade modal I use @entangle:

When I try to call Colaboradores Component I don't have errors in console. In Network tab too.

[rappasoft]

@danielreales7 it's hard to say from just these pictures. Though I do see you have emitTo('colaboradore', 'show') instead of emitTo('colaboradores', 'show') in the screenshot. Not sure if that's an error or not.

[danielreales7]

@danielreales7 it's hard to say from just these pictures. Though I do see you have emitTo('colaboradore', 'show') instead of emitTo('colaboradores', 'show') in the screenshot. Not sure if that's an error or not.

@rappasoft Yes is an error, but with 'colaboradores' it doesn't work too. I don't know how to debug this because I don't have errors...

I did the same that: https://www.youtube.com/watch?v=aBKsuOPa5Ms

[shiroamada]

How do you set the defaultDate options for the flatpickr? I am finding the way to access value of the $attributes->whereStartsWith('wire:model')->first(), so I can set it as the defaultDate.

Below is my messy solution:

    $model = $attributes->whereStartsWith('wire:model')->first();
    $attribute = '';
    $defaultDate = '';
    list($object, $attribute) = explode(".", $model);
    if(!is_null($this->$object->$attribute))
        $defaultDate = $this->$object->$attribute->format('Y-m-d');

[markjcorrigan]

Thank you for this article. It pins down exactly, answers to the questions I have about the TALL stack. Banged my head in Vue and would prefer to stay where I am safe, in Laravel and Co.

[acharseth]

I am using Livewire 3. I have a blade page listing some records through use of @foreach where I would like to be able to edit a comment field for each record and display a "Saved" status after successfull update. I have managed to achieve this through use of the following Alpine directive (catching an event fired from my Livewire controller):

x-on:commentupdated.window="stext = 'Saved' " 

The problem with this is that the .window makes the "Saved" message display on each row, not just the one edited. When I try to fix this by removing .window no messages shows up at any row. Do you have a solution for this?

More info on the blade:

<div>
    <table class="table-auto">
        <thead> ... </thead>
    <tbody>
        @foreach ($mocks as $id => $m)
                <tr wire:key="{{ $m->id }}">
          <td class="border px-4 py-2 w-full">
            <form wire:submit="save" 
                    x-data="{ stext:'' }" 
                x-on:commentupdated="stext =  'Saved' "> 
                    <input class="w-full" 
                        id="comment" 
                        value="{{ $m->comment }}" 
                        type="text" 
                        wire:keydown.enter="updateComment({{ $m }}, $event.target.value)" 
                    wire:keydown.tab="updateComment({{ $m }}, $event.target.value)" 
                    > 
                <div x-text="stext"></div>                  
                    </form>
              </td>
            </tr>
        @endforeach
    </tbody>
  </table>
</div>

[acharseth]

This workaround is working: Remove the Alpine code (x-...) from the <form> and replace the <div x-text="stext"></div> with the following:

<div x-data="{ shown: false, timeout: null, updatedId: null }"
    x-init="
        @this.on('commentupdated', idPar => { 
            clearTimeout(timeout); 
            if ((idPar?.id ?? '') === {{ $m->id }}) {
                shown = true; 
                timeout = setTimeout(() => { shown = false; updatedId = null; }, 1000); 
            }
        })"
    x-show.transition.opacity.out.duration.1000ms="shown"
    style="display: none;">
    <span style="color:red"> {{ __('Updated.') }} </span>
</div>

Here I have also added code to display the status for 1 second.

I still don't understand why I need this workaround though? It also prevents the tab key to work optimally (have to click tab 3 times to get to next field; at least in Chrome).