How to bind eloquent data to an alpine instance from blade?

[MichaelBrauner]

In my blade template I want to bind some data (eloquent collection-array) to the alpine instance:

This is obviously not working.
I know alpine is javascript and this eloquent collection is php.

Is there a way to bind that kind of data to an alpine instance?

[SimoTod]

Laravel collection can be converted to json using the toJson method. It's a perfectly valid data structure in js.

[MichaelBrauner]

Yes ok. But when I type this:

init() { this.options = {{$options->toJson()}} },

It dont work. I get an error:

Uncaught SyntaxError: Unexpected token '&'

and

Uncaught ReferenceError: data is not defined

How can I connect the json array and the alpine component in a proper way?

[SimoTod]

{{ in Laravel escapes all html entities so you'll get a lot of ampersands which alpinejs won't like. You are also going to have problems with the double quote symbols if you use it inline. The best option is to use the script tag and {!!.
It should work, I can send you an example tomorrow.

[SimoTod]

@Slowwie so you can use one of the 2

        <div x-data="data()">
            <template x-for="option in options">
                <p x-text="option.field"></p>
            </template>
        </div>
        <script>
            function data() {
                return {
                    options: {!! $options !!}
                }
            }
        </script>

or

        <div x-data="{ options: {{ $options }} }">
            <template x-for="option in options">
                <p x-text="option.field"></p>
            </template>
        </div>

The first one is in the script tag so you can't escape the json since it has to be javascript.
The second is inline and, in that case, you need to escape the json otherwise the double quote will break the page.
Note, I just realise you don't need to call toJson because it's implicit when you print a collection (sorry, I don't use Laravel on a day by day basis so i did not remember that)

[MichaelBrauner]

Ah nice, this helped me! It works now.

I am completely new to this laravel, blade, alpine stuff - coming from the symfony ecosystem.
But I love it and I am so excited about to deep dive into alpine and laravel.

Thank your for your fast help.