laravel livewire data not show in modal

Question

I can pass the data to component but in modal by Alpine js the data is null.

this is class:

public $code, $products;

    public function getData($id)
    {
        $product = Product::find($id);
        $this->code = $product->code;
    }

  public function render()
    {

        $this->products = Product::latest()->get();

        return view('livewire.cabin');
    }

and this is the component:

<div x-data="{open: false}">
    <section>
if I use $code here the code value is shown !!!
<div>{{ $code }}</div>
        <div class="slideCabin">
            @foreach($products as $product)
                <div>
<img
@click="open = true"
wire:click="getData({{ $product->id }})"
src="/images/allproducts/{{ $product->cover }}"
>
                </div>
            @endforeach

        </div>


    </section>

this is modal which is open by Alpine js by click on tag:

    <div id="backmodal" x-show="open">
but, the code value is null:
 <p>{{ $code }}</p>
</div>

please show your full components and the blade. its not clear enough to me. I'm working with livewire for a while now. Hope I can help you — fahim152, Mar 10 '20 at 11:08
I will post another subject which covers my problem. please consider it. — Mehdi Yaghoubi, Mar 12 '20 at 08:56
tkx brother https://stackoverflow.com/questions/60650712/laravel-livewire-how-to-pass-the-id-or-data-to-another-component-by-click — Mehdi Yaghoubi, Mar 13 '20 at 07:18
checkout my answer. https://stackoverflow.com/a/60666517/10804409 — fahim152, Mar 13 '20 at 07:34
Does this answer your question? [laravel livewire, how to pass the id or data to another component by click](https://stackoverflow.com/questions/60650712/laravel-livewire-how-to-pass-the-id-or-data-to-another-component-by-click) — Elliot, Apr 07 '20 at 05:27

score 5 · Accepted Answer · answered Apr 21 '20 at 15:40

5

you need to check if the code value has changed before calling it in the modal. you got null value because it's been called before assigning it any value.

@if($code)
<p> {{ $code }} </p>
@endif

answered Apr 21 '20 at 15:40

Maen

725
7
10

score 1 · Answer 2 · answered Nov 29 '20 at 03:06

1

PHP 7.x style:

<p> {{ $code ?? "" }} </p>

answered Nov 29 '20 at 03:06

Jhourlad Estrella

3,545
4
37
66

score 0 · Answer 3 · answered Jun 10 '21 at 13:04

0

To make it work you have to add some validation rules. use the "public function rules()" option

answered Jun 10 '21 at 13:04

fanpero87

63
1
5

laravel livewire data not show in modal

3 Answers3