Laravel vue 2 array becomes [object Object],[object Object],[object Object],[object Object]

[reef inlet]

when I want to send a variable from blade to vue like this:

<calendar-component :bookings='@json($bookings)'></calendar-component>```
it becomes:
`` [object Object],[object Object],[object Object],[object Object]``

in my vue i do:
```js
props: ['bookings'],

    mounted() {
        
        console.log(this.bookings)
    },```

and if I do: ``console.log(this.bookings[0])`` it outputs ``]``

_provided screenshot is output in blade_

[knotty gull]

A Laravel model or collection will automatically be JSON-encoded if you just try an echo it as a string. Which you will by trying to echo it in a Vue component tag. So you’re probably trying to JSON-encode a JSON string.

[reef inlet]

So just {{$bookings}} should work?

[knotty gull]

Have you tried?

[reef inlet]

Not yet, will do in a minute

[reef inlet]

still outputs [object, object]

props: {
        bookings: Array
    },```

so it is just a string....

[knotty gull]

What does the variable being sent from your controller look like?

[reef inlet]

I found the problem, this project is made by someone else and that person used a custom service & repository and then uses Entry query from the cms statamic and I used this to return my data in my controller:

$bookings = Entry::query()
        ->where('collection', 'bookings')
        ->limit(5)
        ->get();
        
        return view('bookings.overview', compact('bookings'));

apparently this returns a string or something because is_array($bookings); returns false

[latent sinew]

I would expect that to be a Collection, not a string

[knotty gull]

Mate, that’s just a standard Eloquent query

As @latent sinew says, it’ll be returning a collection. Use dd to verify it.

$bookings = Entry::query()
    ->where('collection', 'bookings')
    ->limit(5)
    ->get();

dd($bookings); // Will most likely be a Collection
        
return view('bookings.overview', compact('bookings'));

[reef inlet]

yes

it returns a collection

[latent sinew]

you can use view source to check what is being sent to the browser
(it will be different than from what you see in devtools)

[knotty gull]

@reef inlet So why, if the model is called Entry, are you assigning it to a variable called $bookings?

[reef inlet]

i need a data my view, how else would I make it available???

[knotty gull]

I’m talking about the naming.

[latent sinew]

There is a chance you'll see something like this:

<calendar-component :bookings='"[....]"'

instead of

<calendar-component :bookings='[....]'

[reef inlet]

because that is what it's about

[knotty gull]

You have a model called Entry. Why are you naming the variable something completely different ($bookings) instead of $entries?

It’s just confusing if you’re querying foos and then just name the variable $bars

[reef inlet]

and also it's referenced as a bookingService everywhere in the project

[knotty gull]

So your model naming is wrong 🙃

[reef inlet]

I didn't name anything

my boss did

but still, how can I use that data my view??

[knotty gull]

You would think you boss knows their business and the name of the entities within their business…

[reef inlet]

well I can get his logic, we need to store & display the bookings that the customer gets

🤷‍♂️

I was assigned to a task to return the data into the view and put all the data inside a calendar in vue 2

so that's what I'm trying to achieve 😅

[knotty gull]

So the model should be called Booking and not Entry? 🤷‍♂️

[knotty gull]

So have you asked your colleagues…?

[reef inlet]

there is no model... the models folder is empty

besides from user.php

[knotty gull]

So where does this magical Entry model come from? 🤷‍♂️

[reef inlet]

use Statamic\Facades\Entry;

that is where it comes from

[knotty gull]

Well passing a variable to a Vue component works fine for me:

<booking-calendar v-bind:bookings="{{ json_encode($bookings) }}"></booking-calendar>

<template>
    <ul>
        <li v-bind:key="booking.id" v-for="booking in bookings">{{ booking.description }}</li>
    </ul>
</template>

<script>
export default {
    props: {
        bookings: {
            required: true,
            type: Array,
        },
    },
    mounted() {
        console.log('bookings', this.bookings);
    },
};
</script>

Ask in the Statamic Discord if Antlers does something weird with automatically stringifying variables: https://discord.gg/FZ3kaNdJ

[reef inlet]

well maybe it has something to do with how Statamic\Facades\Entry; does things will its data

[reef inlet]

I did but they aren't answering 😦

[knotty gull]

Then wait longer.

[reef inlet]

so I figured I'd also try it here

[knotty gull]

It’s not a Laravel issue.

[reef inlet]

oo

I thought maybe someone knew

🤷‍♂️

[gritty spindle]

Also don't forget in JS, Arrays are Objects.

[knotty gull]

So much for they’re “not answering”. You’ve been in conversation with someone since yesterday, and also finished the thread off with “Vue 2 works!”
https://discord.com/channels/489818810157891584/1094985720680153131

So please don’t lie.

[gritty spindle]

I remember when I started Laravel I ran into a similar issue.
Working with array/objects being transformed when I was passing from Back/Front.