Question 15938 in Laravel Question posted in
The official Laravel Documentation can be found here.

Facing strange problem in Laravel Components

I am passing data to the view of the component by $user->profile->profile_pic when I dd in that view it shows the desired value perfectly. But when I use that in some conditions or in tags to print that value it says that Attempt to read property "profile_pic" on null. Although, It is not because I can die and dump that and that value can be seen

Usage of the component:

<x-details 
     :user="$user->id"
      class="w-96 mt-10 py-4" 
      letter="{{ $user->username[0] }}" 
       editable="{{ Auth::user()->username == $user->username }}"
       profile_pic="{{ $user->profile->profile_pic }}"
 />

The component

<?php

namespace AppViewComponents;

use IlluminateViewComponent;
use AppModelsUser;
use IlluminateSupportFacadesDB;

class details extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public $user;
    public function __construct($user = 1)
    {
        $this->user = $user;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return IlluminateContractsViewView|Closure|string
     */
    public function render()
    {
        $user = User::with(['profile'])->firstWhere("id", $this->user);
        $pic = $user->profile->profile_pic;
        return view('components.details', compact("pic"));
    }
}

The view of the component

<div>
    
    @props([
        "letter" => "A", 
        "editable" => 0,
        "profile_pic" => 0
    ])
    {{-- @php
        $src = "";
        if($profile_pic) {
            $src = "/uploads/$profile_pic";
        } else {
            $src = url("fonts/icons/avatars/$letter.svg");
        }
    @endphp --}}
    <div>
        {{-- @dd($pic) --}}
        {{ $pic }}
        {{-- @if(!$editable)
            <a href="#" {{ $attributes->merge(["class" => "avatar"]) }}><img class="rounded-full avatar" src="{{ $src }}" alt="avatar"></a>
        @else 
            <form id="fileUpload">
                <a href="#" onclick="document.getElementById('upload_pic').click()" {{ $attributes->merge(["class" => "avatar"]) }} ><img id="output" style="width: 144px;" class="rounded-full avatar" src="{{ $src }}" alt="avatar"></a>
                <input class="hidden" type="file" name="upload_pic" id="upload_pic">
            </form>
        @endif --}}
    </div>
</div>
Tags:

2

Answers


  1. 0

    Inside the component, you should use $this:

    So instead of

    $pic = $user->profile->profile_pic

    You should do

    $pic = $this->user->profile->profile_pic
    Login or Signup to reply.
  2. 0

    It’s a common issue when you trying to dd() something in foreach, it will always dump first item only and die, so you are always confirm first item and think it work as well as expected.

    In your case, there is probably some user doesn’t have profile_pic or profile don’t have any profile_pic related on it.

    Try to use the code below to debug with it in your component.

    public function render()
{
    try {
        $user = User::with(['profile'])->firstWhere("id", $this->user);
        $pic = $user->profile->profile_pic;
        return view('components.details', compact("pic"));
    } catch (Exception $e) {
        dd($user->profile);
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search