Laravel livewire breaks styling(@push script)

cdmah0mi 于 2023-11-20 发布在其他

关注(0)|答案(2)|浏览(86)

我在一个已经完成的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()中添加几行代码来重新注入样式脚本。
我走的方向对吗？
请帮帮我

laravel

来源：https://stackoverflow.com/questions/71544816/laravel-livewire-breaks-styling-push-script

2条答案

按热度按时间

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

赞(0）回复(0）举报 2023-11-20

nfs0ujit2#

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

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

字符串

赞(0）回复(0）举报 2023-11-20

我来回答

Laravel livewire breaks styling(@push script)

2条答案

相关问题

热门标签

最新问答