Fetching NULL data from database showing as "null" string in laravel-vue project

Question

for example if I fetch users data as these params

first_name -> john
last_name -> null

when I want to fill inputs (or span , p , .. ) I want to show null data as empty string but it showing as "null" string

<h3 class="dahsboard__sidebar__header__name">{{userData.first_name +' '+ userData.last_name}}</h3>

it shows as :

"jhon null"

i found a way to prevent this by doing this in axios:

this.userData = res.data;
for(let user in this.userData){
            if(this.userData[user]=='null' || this.userData[user]==null){
                this.userData[user] = '';
            }
        }

in the above code this.userData is all the users data that i fetch using axios but I'm looking for a better (professional) way to do it

my Api request is something like this :

$user = Auth::user();
return \response()->json([
        'first_name' => $user->name,
        'last_name' => $user->last_name,
        'email' => $user->email,
        'avatar'=>$path //don't mind the avatar 
    ],200);

Answer 1

That's because when you try and concatenate a string in JavaScript, against a null value, JavaScript will use loose conversion to convert null into "null".

To avoid this problem, you have many options, but I think the simplest is to just use two separate prints.

<h3 class="dahsboard__sidebar__header__name">
    {{ userData.first_name }} {{ userData.last_name }}
</h3>

This way, you avoid the concatenation problem, since if each one of these are null they will print nothing.
I've not actually tested this, but it should work, unless the Vue compiler breaks it!