如何使用单独的js文件使用刀片数组(由javascript附加)

Question

我有一个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函数制作一个单独的文件吗？因为我在创建和编辑视图中使用脚本，所以我想让我的视图更干净。

Answer 1

启动此刀片文件后，应分配$produk变量js变量。

下面的代码可以将$produk数据呈现为JS const数据类型变量。

const produk = @json($produk)

然后你可以在select标签内进行foreach

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

Answer 2

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

试试这个example.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>