Laravel Livewire - 如何让@push 工作？答案

【问题标题】：Laravel Livewire - how to get @push to work?Laravel Livewire - 如何让@push 工作？
【发布时间】：2021-02-28 11:32:47
【问题描述】：

不确定我在这里遗漏了什么，但我所做的一切似乎都无法让 @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

组件的其余部分都包含在内。

【问题讨论】：

标签： php laravel push laravel-livewire

【解决方案1】：

没关系，

原来layout/app.blade.php似乎也需要

@stack('scripts')

和

@stack('styles')

让@push 工作。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

是否有样式堆栈无关紧要。因为栈名也可以 @stack('custome-name') 。随心所欲。

重要的是要提到您在父级中设置了堆栈指令。在子刀片文件中，您使用具有相应名称的 @push 指令。在我们的例子中@push('custom-name').

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

【讨论】：

"push指令最好设置在child的顶部。因为它可能会导致Laravel的视图组件出现问题。(...)可能会出现。”这为我解决了。

【解决方案4】：

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

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

在您的父刀片文件中。即与 @yield('content') 将组件数据呈现到父布局的方式相同。在这里查看https://laravel-livewire.com/docs/1.x/inline-scripts了解更多信息

【讨论】：