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/tagify@3.11.1/dist/tagify.min.css">


@endpush

@push('scripts')
  <script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify@3.11.1/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

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

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

在您的 parent blade 文件中。也就是说，与 @yield('content') 将组件数据呈现为 parent 布局的方式相同。点击这里 https://laravel-livewire.com/docs/1.x/inline-scripts 了解更多信息

Answer 4

有没有样式栈也没关系。因为栈名也可以 @stack('custome-name')。随便你。

值得一提的是，您在 parent 中设置了堆栈指令。在 child blade 文件中，您使用具有相应名称的 @push 指令。在我们的示例中 @push('custom-name').

push指令最好设置在child的顶部。因为它可能会导致 Laravel 的视图组件出现问题。 (<x-app>...</x-app>) 可能发生。

Laravel Livewire - 如何让@push 工作？

Laravel Livewire - how to get @push to work?

php

push

laravel

laravel-livewire