Livewire show variable

Question

I have a variable $login that will contain data.

public $account;
public $login;

public function getAccountOrder($id)
{
   $this->account = Buys::findOrFail($id);
   $this->login = $this->account->accounts;
}
public function render()
{
   $buys = Buys::where('user_id', auth()->user()->id)->get();
   return view('livewire.profile', compact('buys'));
}

Modal opening (modal in same view that all content)

<a href="#" data-remodal-target="modal-account-email" wire:click="getAccountOrder({{ $buy->id }})" class="thing-item__link"></a>

In modal displays this variable, but it does not display the required data. But in livewire helper (google extension) i can see data that i need to display

 <div wire:ignore.self class="remodal remodal--prize" data-remodal-id="modal-account-email" aria-labelledby="modalRandTitle" aria-describedby="modalRandDesc" tabindex="-1">
    <button type="button" class="remodal__close" data-remodal-action="close">
        <svg><use xlink:href="#svg-btn_modal_close"></use></svg>
    </button>
    <div class="modal__header" id="modalRandTitle">Your login</div>
    <div class="modal__content" id="modalRandDesc">
        <div class="modal__accounts">
            <div class="modal__accounts-row">
                <div class="input__box">
                    <div class="input__box-btn" data-btn-clipboard="{{ $login }}" onclick="copyToClipboard('{{ $login }}')">
                        <svg class="svg-btn_clipboard"><use xlink:href="#svg-btn_clipboard"></use></svg>
                        <svg class="svg-btn_check"><use xlink:href="#svg-btn_check"></use></svg>
                    </div>
                    <div class="input__box-field">
                        <div class="input__box-label">Login</div>
                        <div class="input__box-value">{{ $login }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

How can i render this variable in livewire component?

Answer 1

It seems you want the changed value of $login gets reflected in the javascript on the page. if this is the case you need to dispatch an event from your getAccountOrder function and catch it on the page with js.

something like this:

public function getAccountOrder($id)
{
   $this->account = Buys::findOrFail($id);
   $this->login = $this->account->accounts;
   $this->dispatchBrowserEvent('yourEventName', ['value'=> $this->login]);

}

then on the something like this should be added:

<script>
  window.addEventListener('yourEventName', (e) => {
    //do something with the value 
    console.log(e.detail.value);
  });
</script>