为什么从 livewire info js 代码传递数组时出现错误？

Question

在 laravel 10 网站上使用文档 https://dev.to/koossaayy/laravel-livewire-multiple-selection-with-virtual-select-1f87 我尝试进行多项选择， 但是复制粘贴该项目的代码时，我得到了“Uncaught SyntaxError: Unexpected token ':'”刀片代码错误：

<div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/virtual-select.min.js" integrity="sha256-Gsn2XyJGdUeHy0r4gaP1mJy1JkLiIWY6g6hJhV5UrIw=" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/virtual-select.min.css" integrity="sha256-KqTuc/vUgQsb5EMyyxWf62qYinMUXDpWELyNx+cCUr0=" crossorigin="anonymous">

    resources/views/livewire/admin/users-permissions-editor.blade.php

    <div>

        <div id="permissions"></div>

            <script>
                const permissions = [
                    @foreach ($permissions as $permission)
                    {
                        label : '{{ $permission->name }}' , // ERROR POINTING THIS LINE
                        value : '{{ $permission->id }}'
                    },
                    @endforeach
                ];
                VirtualSelect.init({
                    ele: '#permissions',
                    multiple: true,
                    options: permissions,
                });
            </script>

    </div>
</div>

我替换了代码“{{ $permission->name }}”中的所有符号，并尝试用“符号包裹键：

@foreach ($permissions as $permission)
{
    "label" : '{{ $permission->name }}' ,
    "value" : '{{ $permission->id }}'
},
@endforeach

我应该以哪种方式在这里传递数组？

"laravel/framework": "^10.48.4",
"livewire/livewire": "^3.4.9",

提前致谢！

Answer 1

使用 Livewire 时，应将

<script> ... </script>

放在

@script ... @endscript

内。