如何使用单独的 js 文件使用刀片数组（由 javascript 附加）？答案

【问题标题】：How to use blade array (appended by javascript) using separate js file?如何使用单独的 js 文件使用刀片数组（由 javascript 附加）？
【发布时间】：2022-01-12 17:02:53
【问题描述】：

我有一个这样的 javascript 函数：

function addRow(){
$('#mainbody').append('<tr>' +
    '<td><select class="form-control" name="addmore['+i+'][name]" id="name'+i+'" required >' +
        '<option disabled="disabled" selected="selected" value="" >Select Product</option>' +
        '@foreach($produk as $pro)' +
        '<option value="{{$pro->id}}">{{$pro->nama}}</option>' +
        '@endforeach'
)}

当我在同一个刀片（视图）文件中使用脚本时，它可以工作，但是当我分离 javascript 函数并将脚本包含在标题中时，它会显示刀片语法，如 {{ $pro->id } }（不是来自控制器的实际数字，但它确实以 {{ $pro->name }} 作为值追加了一个新行。

所以我的问题是，我可以为我的 javascript 函数制作一个单独的文件吗？因为我在创建和编辑视图中使用脚本，所以我想让我的视图更清晰。

【问题讨论】：

因为js无法编译laravel代码。你必须为每个使用 js 而不是 laravel

标签： javascript php jquery laravel laravel-blade

【解决方案1】：

您应该在启动此刀片文件时分配 $produk 变量 js 变量。

下面的代码可以将$produk数据渲染成JS const数据类型变量。

const produk = @json($produk)

然后你可以在select标签里面做foreach

produk.forEach(element => {
    // ...use `element`...
});

【讨论】：

【解决方案2】：

Laravel 模板引擎无法编译 javascript 文件，但您可以在刀片文件中编写 javascript 代码。在刀片中添加您的脚本将您的数据放入格式化的变量 json 中，然后为您想要的每个项目循环

试试这个例子.blade.php

<script type="text/javascript">
let produk = {!! json_encode($produk) !!};

function addRow(){
    var tr = $('<tr></tr>');
    var select = $(`<select class="form-control" name="addmore[]" required ></select>`);
    for(const pro in produk) {
        var td = $(`<option value="${ pro->id }">${ $pro->name }</option>`);
        select.append(td);
    }
    tr.append(select);
    $('#mainbody').append(tr);
}
</script>

【讨论】：