Question

Laravel-未捕获的类型错误：无法读取 null 的属性（读取“值”）

2022-01-21

1299

javascript php laravel laravel-5

我试图在我的应用程序上使用 lightpick datepicker。不幸的是，当我不遵循标准时，它可以工作，而当我遵循标准时，它就不起作用了。
Blade :

@section('page_script')
    <script src="{{ url('js/themeFiles/moment/moment.min.js') }}"></script>
    <script src="{{ url('js/themeFiles/lightpick/lightpick.js') }}"></script>
    <script src="{{ url('js/custom/datePicker.js') }}"></script>
    <script src="{{ url('js/custom/planningStats.js') }}"></script>
@endsection

@section('content')
    @include('planning.partials.planningStatsForm')
@endsection

datePicker.js:

var picker = new Lightpick({
    field: document.getElementById('ddebut_picker'),
    secondField: document.getElementById('dfin_picker'),
    repick: true,
    lang: 'fr',
    singleDate: false,
    selectForward: true
});

错误（如果我使用上面的代码）：

如果我在 @section('content') 中使用脚本标签，并且不使用单独的 @section('page_script') 部分，那么一切都会完美运行。但对于当前代码，它不起作用。我没有改变 js、控制器、blade 或模型中的任何内容。

Answer 1

我的 JS 无法找到元素，因为我的顺序不正确（即使我检查页面源代码时顺序是正确的。但很令人困惑。）。我使用 defer 属性解决了我的问题。

[defer, a Boolean attribute,] is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.

根据这个答案， 顺序很重要 。还有其他方法可以解决这个问题，但我发现 defer 对外部脚本最有用。

@section('page_script')
    <script src="{{ url('js/themeFiles/moment/moment.js') }}" defer></script>
    <script src="{{ url('js/themeFiles/moment/moment.min.js') }}" defer></script>
    <script src="{{ url('js/themeFiles/lightpick/lightpick.js') }}" defer></script>
    <script src="{{ url('js/custom/datePicker.js') }}" defer></script>
    <script src="{{ url('js/custom/planningStats.js') }}" defer></script>
@endsection

Answer 2

它深化了布局中包含的 page_scripts 的位置。我认为是在头部。在您的代码中搜索 @stack('page_script')。

您可以在布局中添加一个位于结束主体上方的部分。 @stack('custom_scripts') 。如果您“遵循标准”，那么就可以工作。仅将名称从 page_script 更改为 @section('custom_script') 。