Laravel Backpack中crud未定义报错：JS代码执行问题求助

问题详情 #

实现Laravel Backpack官方文档的JavaScript示例时，已创建CRUD文件并在setupCreateOperation方法中引入自定义JS文件，但调用crud对象时控制台报错“crud is not defined”。

相关代码：

后端PHP代码 #

protected function setupCreateOperation()
{
   $this->crud->setValidation(ProductRequest::class);
   $this->crud->addFields([]);
   Widget::add()->type('script')->content('assets/js/admin/forms/product.js');
}

前端JS代码 #

crud.field('parent').onChange(function(field) {
    console.log(field.value);
}).change();

解决方案 #

报错原因是自定义JS代码在Backpack核心crud对象初始化前就执行了，以下是几种修复方式：

• 使用Backpack原生crud:ready事件（推荐）
  Backpack提供了专门的事件，确保crud对象完全初始化后再执行代码：

  document.addEventListener('crud:ready', function() {
      crud.field('parent').onChange(function(field) {
          console.log(field.value);
      }).change();
  });
  

• 等待DOM加载完成
  把代码包裹在DOM加载完成事件中，确保页面资源全部加载后执行：

  document.addEventListener('DOMContentLoaded', function() {
      crud.field('parent').onChange(function(field) {
          console.log(field.value);
      }).change();
  });
  

• 调整脚本加载优先级
  修改Widget的加载顺序，让自定义JS晚于Backpack核心脚本加载：

  Widget::add()->type('script')->content('assets/js/admin/forms/product.js')->priority(100);
  

  数值越大加载越晚，Backpack核心脚本优先级通常较低，设置较高数值可确保自定义脚本后加载。

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