using Laravel array data in Alpine x-data directive

user_3077827 0
Viewed 1023

I have a Laravel array that I want to use in an Alpine.js component:

 $array = Names::get('name')->pluck('name')->toArray();

this stores the following data and sends it to the view:

array(3) { [0]=> string(3) "Foo" [1]=> string(3) "Bar" [2]=> string(3) "Baz" }

my alpine component has the directive x-data (I am using the search example from the Getting Started page):

 x-data="{
    search: '',

    items: ['foo', 'bar', 'baz'],

    get filteredItems() {
        return this.items.filter(
            i => i.startsWith(this.search)
        )
    }
}"

I need to insert the data from $array to the x-data directive like this:

items: $array

however this is not displaying the data

I can't use the blade {{ }} as that will not echo an array

alpine.js laravel
1 Answers

Use @json() directive in blade. So your alpine component should look something like:

x-data="{
    search: '',

    items: @json($array),

    get filteredItems() {
        return this.items.filter(
            i => i.startsWith(this.search)
        )
    }
}"
user_62142100
Related