Alpine 表达式错误：无法访问属性“contains”，$refs.panel 未定义

Question

我正在使用 livewire 和 alpine 制作带有选项卡的页面。每次单击选项卡时，都会显示不同的面板。非常简单，但是每次我单击选项卡来更改面板时，我都会收到此警告。

type hereAlpine Expression Error: can't access property "contains", $refs.panel is undefined

Expression: "! $refs.panel.contains($event.target) && close()"

 
<div class="relative" x-data="{\n            open: fal…       }\n            }" @keydown.escape.prevent.stop="close()" x-id="['dropdown-button']" @focusin.window="! $refs.panel.contains($event.target) && close()">

还有这个错误

未捕获类型错误：无法访问属性“contains”，$refs.panel未定义

我尝试在我的应用程序服务提供商中显式定义我的实时Wire JS的位置

<header>
    <div class="bg-primaryBlack flex items-center justify-between px-8">
        <div>
            <a href="/">
                <x-application-logo class="w-28 h-24" />
            </a>
        </div>
        <div>
            <nav>
                <ul class="flex text-primaryWhite font-semibold">
                    <li class="mr-5">
                        <a
                            class="hover:text-gray-400 transition-colors ease-in-out"
                            href="#">Plaques</a>
                    </li>
                    <li class="mr-5">
                        <a
                            class="hover:text-gray-400 transition-colors ease-in-out"
                            href="#">Pens</a>
                    </li>
                    <li>
                        <a
                            class="hover:text-gray-400 transition-colors ease-in-out"
                            href="#">Lichtenberg</a>
                    </li>
                </ul>
            </nav>
        </div>
        {{--Parent--}}
        <div
            x-data="{
            open: false,
            toggle(){
                this.open = this.open ? this.close() : true
            },

            close(focusAfter){
                this.open=false

                focusAfter && focusAfter.focus()
            }
            }"
            @keydown.escape.prevent.stop="close()"
            x-id="['dropdown-button']"
            @focusin.window= "! $refs.panel.contains($event.target) && close()"
            class="relative">

            @if(Auth::user())
                <div class="flex items-center relative">
                    {{-- Button --}}
                    <button
                        x-ref="button"
                        @click="toggle()"
                        type="button"
                        :aria-expanded="open"
                        :aria-controls="$id('dropdown-button')"
                        class="text-primaryWhite text-sm block mr-2"
                        href="{{ route('dashboard') }}">{{ auth()->user()->name }}</button>
                    <x-icons.right-caret class="w-5 h-5 fill-primaryWhite" />
                    <div class="absolute top-0 -left-7">
                        <x-icons.cart class="w-5 h-5 fill-primaryWhite"/>
                        <a class="absolute -top-3 -left-5 text-xs bg-red-400 px-1.5 rounded-full text-primaryWhite font-bold" href="#">5</a>
                    </div>

                </div>
                {{--Panel--}}
                <div
                    x-ref="panel"
                    x-show="open"
                    @click.outside="close($refs.button)"
                    :id="$id('dropdown-button')"
                    style="display:none"
                    class="absolute top-10 right-3 z-10">
                    <ul class="bg-secondaryWhite px-4 text-left py-2 space-y-2 rounded uppercase text-sm">
                        <li class="hover:bg-primaryGreen hover:text-primaryWhite px-2 rounded">
                            <x-links.logout/>
                        </li>
                        <li class="hover:bg-primaryGreen hover:text-primaryWhite px-2 rounded">
                            <a href="{{ route('dashboard') }}">Dashboard</a>
                        </li>
                        <li class="hover:bg-primaryGreen hover:text-primaryWhite px-2 rounded">
                            <a href="#">Cart</a>
                        </li>
                    </ul>
                </div>

            @else
                <a
                    class="font-semibold text-gray-300 mr-4 hover:text-gray-400 transition-colors ease-in-out"
                    href="{{ route('login') }}">Login</a>
                <a
                    class="font-semibold text-gray-300 hover:text-gray-400 transition-colors ease-in-out"
                    href="{{ route('register') }}">Register</a>
            @endif
        </div>
    </div>
</header>

Answer 1

包含 x-ref="panel"

: 的

 <div
    x-ref="panel"
    x-show="open"
.....

被放入 @if(Auth::user()) 中，并且在 @else 分支中没有任何 x-ref="panel"，因此出现错误。

要解决该问题，您可以在

@if(Auth::user()) 中创建一个新的 ，检查并移动 x-data 以及所有 Alpine 内容。