laravel 连线问题:轮询关闭模式窗口

k4ymrczo  于 2023-03-04  发布在  其他
关注(0)|答案(1)|浏览(151)

我有一个问题,我正在使用wire:poll,当我打开一个模态窗口时,它关闭了
我使用laravel 10和bootstrap,并使用wirepoll刷新视图每2秒,不知何故,它关闭模态窗口每2秒太

@include('livewire.modals')

模态叶片:

@foreach ($product->habitaciones as $habitacion)
    
    <button type="button" data-toggle="modal" data-target="#registerModal">
    
        <div wire:poll>
    
    
            <div
                class=" @if($habitacion->estado == '1') items @elseif($habitacion->estado == '2') items2 @elseif($habitacion->estado == '3') items3 @endif ">
                <p class="texto1">{{$habitacion->id}}</p>
                <p class="texto2">@if($habitacion->estado == '1') DISPONIBLE @elseif($habitacion->estado ==
                    '2') OCUPADA @elseif($habitacion->estado == '3') RESERVADA @endif</p>
                <p style=" @if($habitacion->estado == '1') color: #6ff96b;  @elseif($habitacion->estado == '2') color: #fa595a; @elseif($habitacion->estado == '3') color: #7c98fc; @endif"
                    class="texto3">30 MIN</p>
            </div>
        </div>
    
    </button>
    
   <!-- Modal -->
<div class="modal fade register-modal" id="registerModal" tabindex="-1" role="dialog"
    aria-labelledby="registerModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <div class="modal-header" id="registerModalLabel">
                <h4 class="modal-title">Register</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><svg aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="feather feather-x">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg></button>
            </div>
            <div class="modal-body">
                <form class="mt-0">
                    <div class="form-group">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="feather feather-user">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                            <circle cx="12" cy="7" r="4"></circle>
                        </svg>
                        <input type="text" class="form-control mb-2" id="exampleInputUsername1" placeholder="Username">
                    </div>
                    <div class="form-group">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="feather feather-at-sign">
                            <circle cx="12" cy="12" r="4"></circle>
                            <path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"></path>
                        </svg>
                        <input type="email" class="form-control mb-2" id="exampleInputEmail2" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="feather feather-lock">
                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                            <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                        </svg>
                        <input type="password" class="form-control mb-4" id="exampleInputPassword2"
                            placeholder="Password">
                    </div>
                    <button type="submit" class="btn btn-primary mt-2 mb-2 btn-block">Register</button>
                </form>

             
        

            </div>
            <div class="modal-footer justify-content-center">
                <div class="forgot login-footer">
                    <span>Already have <a href="javascript:void(0);">Login</a>?</span>
                </div>
            </div>
        </div>
    </div>
</div>

    
    @endforeach

有没有办法防止wire:poll不关闭模态窗口?

yjghlzjz

yjghlzjz1#

模态使用JavaScript显示。它更新样式。当你wire:poll时,视图被重新呈现。因此,应用在前端的样式被移除,因为后端不知道这个样式。你可以简单地通过添加wire:ignore来停止对这个模态的更新。如果模态中的内容应该被更新,你可以使用wire:ignore.self来只忽略 Package 容器。
参见文档

相关问题