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

是否有样式堆栈并不重要。因为栈名也可以是@stack('custome-name')。随你便。

在父指令中设置堆栈指令是很重要的。在子blade文件中，使用带有相应名称的@push指令。在我们的示例中，@push('custom-name').

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

Answer 4

正如Mike Thrussell指出的，请务必添加

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

在父刀片文件中。也就是说，同样的方式，你做@yield('content')渲染组件数据到父布局。点击这里https://laravel-livewire.com/docs/1.x/inline-scripts获取更多信息