This problem looked so simple for me when I face with it yesterday! But when I didn't find similar question on google I realized it is not as simple as what I thought!!!
So if there is any similar question that I didn't find since yesterday please let me know.

I'm trying to pass data from database using Laravel. I used UUID as primary key for Notifications table instead of auto-increment primary key (this is a default option for notifications table in Laravel!).
I can fetch and read all other columns as what they are but ID column which is UUID type comes as 0 OR 0 OR 5 or just any other single numbers however the real ID can be 1367dc99-ee67-4f0f-b0eb-c2215831d7db.
Frankly, I have no idea what is wrong either with the method I used in the Laravel or in Vue JS axios.

Is there any specific technique that I should use to read UUIDs from backend to frontend? Please help me with this.

I attached codes from Laravel and Vue JS Axios down below. If there is anything missing in my question please let me know.

Laravel Code

$notifications = Notifications::where('notifiable_id', auth()->user()->id)->orderBy('created_at', 'DESC')->get();

return response()->json(
[
   "notifications" => $notifications
]

Vue JS Axios GET Method

data () {
   return {
      loading: false,
      unreadNotifications: []
   }
},
methods: {
  async Notifications () {
    this.loading = true
    await axios.get('/user/notifications/unreads')
        .then((response) => {
            this.unreadNotifications = response.data
        })
        .finally (() => {
            this.loading = false
        })
  }
}

the output is [ 0, 5 ]

CodePudding user response：

If you want to display your id like this : 1367dc99-ee67-4f0f-b0eb-c2215831d7db, then modify your query by :

$notifications = DB::table('notifications')
         ->where('notifiable_id', auth()->user()->id)
         ->orderByDesc('created_at')
         ->get();

return response()->json([
       "notifications" => $notifications
    ]);