Laravel Livewire中如何在Blade模板正确引入JavaScript文件

直接放入public文件夹引入 #

• 将filtering_script.js文件放到public/js/目录下（没有js文件夹就手动创建）
• 在需要使用该功能的Blade模板中，通过Laravel的asset()函数引入脚本：

<script src="{{ asset('js/filtering_script.js') }}"></script>

• 关键注意：必须确保DOM元素加载完成后再执行脚本。可以给输入框绑定事件时包裹在DOMContentLoaded事件里，避免找不到元素的错误：

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('myInput').addEventListener('keyup', Filtering);
});

或者直接在输入框标签里写onkeyup="Filtering()"，但要保证脚本在这之前已经加载完成。

通过Laravel Mix编译引入 #

• 把filtering_script.js移动到resources/js/目录下
• 打开resources/js/app.js，在文件末尾添加引入代码：

require('./filtering_script.js');

• 运行Mix编译命令：

npm run dev # 开发环境使用
# 生产环境编译用 npm run prod

• 在Blade模板中引入编译后的app.js（一般项目的布局模板layouts/app.blade.php里已经有这段代码，确认存在即可）：

<script src="{{ mix('/js/app.js') }}"></script>

常见排查要点 #

• 打开浏览器控制台查看报错：如果是Uncaught ReferenceError: Filtering is not defined，说明脚本没加载成功；如果是Cannot read properties of null，说明脚本执行时DOM元素还没加载完成
• 用浏览器开发者工具的Network标签，检查脚本的请求URL是否正确，是否返回200状态码
• 确认页面中myInput和myTable的ID是唯一且存在的

内容的提问来源于stack exchange，提问作者Michele