Laravel Livewire - 如何让 @push 工作？

Question

不确定我在这里缺少什么，但我所做的一切似乎都不允许

@push('styles')

或

@push ('scripts')

工作。

layout/app.blade.php

包括：

...

 @livewireStyles

...

 @livewireScripts

...

livewire/tagify.blade.php

@push('styles')
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yaireo/[email protected]/dist/tagify.min.css">


@endpush

@push('scripts')
  <script src="https://cdn.jsdelivr.net/npm/@yaireo/[email protected]/dist/tagify.min.js"></script>
  <script>
  document.addEventListener("DOMContentLoaded", function(event) {

    var input = document.getElementById('tagify')
    var tagify = new Tagify(input, {
      whitelist : [
        @foreach($tags as $tag)
          '{{ $tag }}'@if(! $loop->last), @endif
        @endforeach
      ]
    })
    input.addEventListener('change', onChange)

    function onChange(e){
      @this.call('changeTags', e.target.value)
    }

  })
  </script>

@endpush

其余组件都包含在内。

Answer 1

没关系，

原来

layout/app.blade.php

似乎也需要

@stack('scripts')

和

@stack('styles') 

为了

@push

工作。

Answer 2

Livewire 组件只能在页面加载时推送到任何布局堆栈，任何后续组件渲染后推送到堆栈将不起作用。

Answer 3

有没有样式栈也没关系。因为堆栈名称也可以是

@stack('custome-name')

。 随心所欲。

值得一提的是，您在父级中设置了 stack 指令。在子刀片文件中，您使用带有相应名称的 @push 指令。在我们的示例中

@push('custom-name').

push指令最好设置在child的顶部。因为它可能会导致 Laravel 的视图组件出现问题。 (

<x-app>...</x-app>

) 可能会发生。

Answer 4

正如 Mike Thrussell 指出的那样，请确保添加

@stack('styles')
@stack('scripts')

在您的父刀片文件中。即以与

@yield('content')

相同的方式将组件数据渲染到父布局。检查此处https://laravel-livewire.com/docs/1.x/inline-scripts了解更多信息