在laravel 10站点上使用文档https://dev.to/koossaayy/laravel-livewire-multiple-selection-with-virtual-select-1f87 我try 进行多重 Select , 但复制粘贴项目的代码我得到了"Uncatch Syntax错误:意外令牌":""Blade 代码上的错误:

<div>

    <script src="https://cdn.jsdelivr.net/npm/virtual-select-plugin@1.0.39/dist/virtual-select.min.js" integrity="sha256-Gsn2XyJGdUeHy0r4gaP1mJy1JkLiIWY6g6hJhV5UrIw=" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/virtual-select-plugin@1.0.39/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>

我替换了代码"{{ $performance-Name }}"中的所有符号,并try 用"符号:

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

我该用哪种方式传递数组?

ADDITIVE INFO :

我将 playbook 重新制作为:

<div>

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

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

</div>

但无论如何,我得到了"意外令牌":'"错误,在浏览器中我看到:

enter image description here

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

提前感谢!

推荐答案

我用Blade 中的代码解决了这个问题:

var permissionsListing = @json($permissionsListing)

    VirtualSelect.init({
        ele: '#permissions',
        multiple: true,
        options: permissionsListing,
    });

其中组件中的数组$permissionsListing具有标签和值键

Javascript相关问答推荐

如何比较嵌套对象的更改并创建更改报告

如何使用CSS和JavaScript创建粘性、凝聚力的形状到形状(容器)变形?

如何提取Cypress中文本

Next.js Next/Image图像隐含性有任何类型-如何修复?

将json数组项转换为js中的扁平

Javascript,部分重排序数组

使搜索栏更改语言

如何在Obsidian dataview中创建进度条

我的服务工作器没有连接到我的Chrome扩展中的内容脚本.我该怎么解决这个问题?

Regex结果包含额外的match/group,只带一个返回

如何根据当前打开的BottomTab Screeb动态加载React组件?

您能在卸载程序(QtInsteller框架)上添加WizardPage吗?

覆盖TypeScrip中的Lit-Element子类的属性类型

将数组扩展到对象中

Vaadin定制组件-保持对javascrip变量的访问

有效路径同时显示有效路径组件和不存在的路径组件

ngOnChanges仅在第二次调用时才触发

Pevent触发material 用户界面数据网格中的自动保存

如何让SVG图标在被点击和访问后改变 colored颜色 ,并在被访问后取消点击时恢复到原来的 colored颜色 ?

通过解构/功能组件接收props-prop验证中缺少错误"