在Alpine x-data指令中使用Laravel数组数据

z9gpfhce 于 2022-12-05 发布在其他

关注(0)|答案(2)|浏览(127)

我想在Alpine.js组件中使用一个Laravel数组：

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

这将存储以下数据并将其发送到视图：

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

我的alpine组件具有指令x-data（我使用的搜索示例来自Getting Started页面）：

x-data="{
    search: '',

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

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

我需要将$array中的数据插入到x-data指令中，如下所示：

items: $array

但这并不显示数据
我不能使用blade {{ }}，因为它不会回显数组

laravel

来源：https://stackoverflow.com/questions/70456370/using-laravel-array-data-in-alpine-x-data-directive

2条答案

按热度按时间

7cwmlq891#

在blade中使用@json（）指令。这样你的alpine组件应该看起来像这样：

x-data="{
    search: '',

    items: @json($array),

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

赞(0）回复(0）举报 2022-12-05

vhmi4jdf2#

如果您使用livewire，则可以始终使用alpine的entangle它接受数组
https://laravel-livewire.com/docs/2.x/alpine-js#sharing-state

赞(0）回复(0）举报 2022-12-05