从 Laravel 刀片中的 js 文件访问对象？答案

【问题标题】：Access object from js file inside Laravel blade?从 Laravel 刀片中的 js 文件访问对象？
【发布时间】：2021-02-24 20:46:40
【问题描述】：

我想在我的刀片文件中使用包 Sortablejs。

因此，我使用 npm 安装了它，并在我的资产中创建了一个带有此内容的 sortable.js 文件

import Sortable from "sortablejs";

使用 webpack.mix.js 编译到 public 文件夹中

我希望我可以在刀片中这样使用它：

<script src="{{ asset('js/sortable.js') }}"></script>
<script type="text/javascript">

    var documentlists = $('#documentlist');
    Sortable.create(documentlists);
</script>

但是，这会导致错误：

未捕获的引用错误：未定义可排序 http://localhost:8004/admin/settings/businessagreement:715

为什么我不能像这样包含它，我需要怎么做？

【问题讨论】：

制作npm run watch然后试试
@AhmedShams 我用 npm 编译过
在你的 sotrable.js 文件中添加 window.Sortable = Sortable 以将其公开给全局窗口，或者（甚至更好）在你的 sortable.js 文件中移动 Sortable.create($('#documentlist'))

标签： javascript php laravel laravel-blade

【解决方案1】：

您的import 语句需要与您的Sortable 代码位于同一文件中。然后你可以运行 npm run watch 来使用 laravel mix 创建你的脚本。

刀片文件加载 Javascript 文件

<script src="{{ asset('js/sortable.js') }}"></script>
<script src="{{ asset('is/myscript.js') }}"></script>

myscript.js 由npm run watch生成

import Sortable from "sortablejs";

var documentlists = $('#documentlist');
var sortable = Sortable.create(documentlists);

也许它甚至可以在省略第一个脚本标记时工作。

【讨论】：

【解决方案2】：

好的，首先在app.js put

import Sortable from "sortablejs";

并确保它已导入 => 如果您使用 vs 代码，请按 ctrl + 单击 sortablejs 如果不尝试 npm run watch 然后在你的主刀片中导入 app.js

<script src="/js/app.js"></script>

然后做你想做的事

【讨论】：