Question

我正在使用Reswire 3和新导航特征。

我有一个包含在一页的部件,但每次我从那页到代号的网页时,我每次开车时,都会有更黑暗的背景,直到翻黑(在我离开一页时,根本就保持了这种状态)。

我如何能够防止这种情况发生?

<livewire:admin.pet-codes.generate-pet-codes />


<button type="button" class="btn btn-alt-primary push" data-bs-toggle="modal" data-bs-target="#generate-pet-codes">Generate Pet Codes</button>

<div class="modal fade" id="generate-pet-codes" tabindex="-1" aria-labelledby="generate-pet-codes" style="display: none;" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="block block-rounded block-transparent mb-0">
                <div class="block-header block-header-default">
                    <h3 class="block-title">Modal Title</h3>
                    <div class="block-options">
                        <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close">
                            <i class="fa fa-fw fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="block-content fs-sm">
                    <x-forms.text-input type="number" placeholder="Amount" name="amount" />
                    <form wire:submit="generate">
                        <div class="mt-3">
                            <x-forms.button title="Generate" />
                        </div>
                    </form>
                </div>
                <div class="block-content block-content-full text-end bg-body">
                    <button type="button" class="btn btn-sm btn-alt-secondary me-1" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

提前感谢:

Answer 1

Make sure modal id (generate-pet-codes) is unique on the page. If you are including this component multiple times on the same page, the modal IDs should be unique for each instance of the component.

You can use the key attribute in the Livewire component tag to make sure Livewire treats different copies of the same component as separate entities:

<livewire:admin.pet-codes.generate-pet-codes :key=" generate-pet-codes-  . $uniqueIdentifier" />

Keys aren t optional

If you have used frontend frameworks like Vue or Alpine, you are familiar with adding a key to a nested element in a loop. However, in those frameworks, a key isn t mandatory, meaning the items will render, but a re-order might not be tracked properly. However, Livewire relies more heavily on keys and will behave incorrectly without them.

Also see: Nesting

Answer 2

在编组中添加编码:

<script>
     $.fn.modal.Constructor.prototype.show = () => $( .modal-backdrop ).not(":first").remove();
</script>

Keys aren t optional

友情链接