CODEWITHSUNDEEP
laravellaravel-livewire
Mehdi Yaghoubi
Mehdi Yaghoubi

Reputation: 653

laravel livewire data not show in modal

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>

Upvotes: 4

Views: 6684

Answers (3)

fanpero87
fanpero87

Reputation: 63

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

Upvotes: 0

Jhourlad Estrella
Jhourlad Estrella

Reputation: 3670

PHP 7.x style:

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

Upvotes: 1

Maen
Maen

Reputation: 815

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

Upvotes: 5

Related Questions