ERROR: Attempt to read property on array

Hi,

I am using a click event on buttons (component.blade):

<div class="columns">
    @foreach($cards as $card)
        <div class="column is-one-fifth"> 
            <button wire:click="gotClicked('{{ $card->id }}')" style="width: 128px; height:128px; padding:0px;">
                <img src="{{ $card->url }}">
            </button>
        </div>
    @endforeach
</div>

Results in:

</div>
        <div class="column is-one-fifth"> 
        <button wire:click="gotClicked('afa4a0f24863c6308fcffc174f0a30d3')" style="width: 128px; height:128px; padding:0px;">
            <img src="https://bulma.io/images/placeholders/128x128.xxx">
        </button>
    </div>
        <div class="column is-one-fifth"> 
        <button wire:click="gotClicked('f0e5793e81bf49ec2a2c34c4b4d52bd5')" style="width: 128px; height:128px; padding:0px;">
            <img src="https://bulma.io/images/placeholders/128x128.xxx">
        </button>
    </div>
        <div class="column is-one-fifth"> 
        <button wire:click="gotClicked('5bbae843895fb3381ba1e641a7db500d')" style="width: 128px; height:128px; padding:0px;">
            <img src="https://bulma.io/images/placeholders/128x128.xxx">
        </button>
    </div>
        <div class="column is-one-fifth"> 
        <button wire:click="gotClicked('90fc0042cc5cba5111f77b4123045601')" style="width: 128px; height:128px; padding:0px;">
            <img src="https://bulma.io/images/placeholders/128x128.xxx">
        </button>
    </div>

The method that gets called:

public function gotClicked($card)
{

    $bid = session('bid');
    
    if($bid == $card){
        dd('HURRAY!!!');
    }
}

When I click on one of the buttons, the following error shows up:

Attempt to read property “id” on array

But when I put a dd() in the method like so:

public function gotClicked($card)
{
    dd($card);
    $bid = session('bid');
    
    if($bid == $card){
        dd('HURRAY!!!');
    }
}

I get the value of $card.

I don’t really get it and do not understand why it doesn’t work.
When I use {{ $card['id'] }} it does not work at all. Because the ID do not get printed.

THX

Hey, @foofourtyone

Can you show us the content of the card session and how it printed?

Do you mean the content of $bid = session('bid');?
It’s just a string like that 6e0f3676bf516555855dad0476560486.

Everything is fine until I click a button.
This is how it looks in the browser:

And this is how the error message looks like:

What about casting the data?

wire:click="gotClicked="'{{ (int) $card->id }}'"

This sit the whole component:

class Card extends Component
{
    public $cards;

    public function mount()
    {
        if (Storage::disk('public')->exists('eastergame_config.json')){

            $this->cards = json_decode(Storage::disk('public')->get('eastergame_config.json'));
            $count = rand(1, count($this->cards));
            $x = 0;
            
            foreach ($this->cards as $card) {
                $i = md5(uniqid());

                if ($x == $count){
                    
                    $card->id = $i;
                    session(['bid' => $i]);

                } else {

                    $card->id = $i;
        
                }
                $x++; 
           }   
        }
    }

    public function gotClicked($card)
    {
        $bid = session('bid');
        //dd($bid);
        
        if($bid == $card){
            dd('HURRA!!!');
        }
    }

    public function render()
    {
        return view('livewire.card');
    }    
}

I also printed out the variable types:

Please see: https://flareapp.io/share/VmeGjEa7#F52

OK, I think I solved it.

Problem was: I was populating $cards at the mount()function. I moved everything to render(). Now it works.

public function render()
    {
        if (Storage::disk('public')->exists('eastergame_config.json')){

            $this->cards = json_decode(Storage::disk('public')->get('eastergame_config.json'));
            $count = rand(1, count($this->cards));
            $x = 0;
            
            foreach ($this->cards as $card) {
                $i = md5(uniqid());

                if ($x == $count){
                    
                    $card->id = $i;
                    session(['bid' => $i]);

                } else {

                    $card->id = $i;
        
                }
                $x++; 
           }   
        }

        return view('livewire.card');
    }
1 Like

Thanks you saved me so much headache!