Laravel livewire breaks styling(@push script)

cdmah0mi  于 2023-11-20  发布在  其他
关注(0)|答案(2)|浏览(87)

我在一个已经完成的laravel项目上应用了livewire。
它只是简单地应用线:模型选择如下。

<select wire:model="wired" id="#selector-01" >
  <option>1</option>
  <option>1</option>
 </select>

字符串
并在for循环的if语句中使用wire变量(wired)。

<select id="#selector-02">
   @foreach($numbers in $number)
     @if($some_id == $wired)
        <option> some_id </option>
     @endif
   @endforeach
</select>


我只把它当作一个组件使用。
所有的数据在原始的Laravel控制器中被控制。
livewire组件由@livewire('component-name')调用
一切都很好,就像我想的那样,除了造型。
我认为这与使用SlimSelect有关
在livewire component-name.blade.php的末尾,我有SlimSelect样式,如下所示。

@push('js')
        <script>
            new SlimSelect({
                select: '#selector-01'
            })
            new SlimSelect({
                select: '#selector-02'
            })
        </script>
 @endpush


我试过把密码移到
1.带有@push和@stack的原始. blade.php
1.不带@push的app. blade. php
但仍会破坏造型。
我认为一个解决方案可能是在火线控制器中的update()中添加几行代码来重新注入样式脚本。
我走的方向对吗?
请帮帮我

sd2nnvve

sd2nnvve1#

添加下面的代码解决了这个问题。

<script>
        document.addEventListener('livewire:update', function () {
            // Your JS here.
            new SlimSelect({
                select: '#selector-01'
            })
            new SlimSelect({
                select: '#selector-01'
            })
        })
</script>

字符串
你也可以使用livewire:onload代替@stack和@push来加载样式onload
Reference to livewire doc

nfs0ujit

nfs0ujit2#

添加导线:忽略以选择元素或其父元素

<select id="#selector-02" wire:ignore>
   @foreach($numbers in $number)
     @if($some_id == $wired)
        <option> some_id </option>
     @endif
   @endforeach
</select>

字符串

相关问题