Alpinejs 属性绑定到 x-show 未定义

Question

我正在使用 Laravel 的 Blade 语法构建表单，并使用 AlpineJs 进行一些交互性操作，例如显示和隐藏内容。

我的代码在这里：

<div class="flex items-center" x-data="destinationBuilder">
    <x-label required="true" class="mr-5">Destination:</x-label>
    <x-basic-input @change="handleDestinationChange" ::value="destination" placeholder="https://google.com"/>
    <x-buttons.primary class="ml-5" @check="validateDestination">Check</x-buttons.primary>
</div>
<div class="mt-4">
    <button type="button"
            class="p-5 w-full text-sm grid grid-cols-[min-content_min-content_auto_min-content] items-center gap-x-3 font-light text-gray-400 hover:bg-gray-300 rounded-full"
            @click.camel="toggleAdvancedOptions">
        <i class="lni lni-cog"></i>
        <span class="whitespace-nowrap">Advanced options</span>
        <div class="h-px w-full bg-gray-400"></div>
        <i class="lni lni-chevron-down"></i>
    </button>
    <div x-show="advanced" x-transition x-cloak>
{{--        <x-links.get-parameter-form/>--}}
    </div>
</div>

@push('footer-scripts')
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('destinationBuilder', () => ({

                destination: '',

                advanced: false,

                handleDestinationChange() {
                    if (this.validateDestination()) {
                        // emit constructed destination up
                    }
                },

                validateDestination() {
                    // check url is in a legit form (with https)
                    // basic is just url input
                    // advanced dropdown with get parameters, fragment, http protocol and port
                },

                toggleAdvancedOptions() {
                    this.advanced = !this.advanced;
                }

            }));
        })
    </script>
@endpush

我正在使用名为 advanced 的属性绑定到另一个组件的 x-show。

当我查看浏览器时，我收到以下消息：app.js:434 Uncaught ReferenceError: advanced is not defined

我不确定这是否是由于与 blade 发生奇怪的碰撞，或者我是否遗漏了 Alpinejs 的一些基本知识。我尝试将变量重命名为 showAdvanced 但这也不起作用。我希望 advanced 被识别为属性并按预期绑定到 x-show。我在这里做错了什么？

Answer 1

您具有以下 HTML 结构：

<div x-data="destinationBuilder">
...
</div>
<div>
    <div x-show="advanced">
    ...
    </div>
</div>

如您所见，第二个 div 不是定义 x-data 的第一个元素的子元素，因此它在 destinationBuilder 组件的范围之外。只需创建一个嵌入两个 div 的通用 div（或类似）元素并在那里应用组件 x-data，这样每个 div 都可以访问组件的范围。

Alpinejs 属性绑定到 x-show 未定义

Alpinejs property bound to x-show not defined

laravel

laravel-blade

alpine.js

Alpinejs 属性 绑定到 x-show 未定义

Alpinejs property bound to x-show not defined

laravel

laravel-blade

alpine.js

Alpinejs 属性绑定到 x-show 未定义