开发者问题收集

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

2022-04-04
1831

我正在使用 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 未定义

我不确定这是由于与 blade 的奇怪碰撞还是我缺少 Alpinejs 的某些基本功能。我尝试将变量重命名为 showAdvanced ,但这也不起作用。我希望 advanced 被识别为属性并按预期绑定到 x-show。我在这里做错了什么?

1个回答

您有以下 HTML 结构:

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

如您所见,第二个 div 不是定义 x-data 的第一个 div 的子元素,因此它超出了 destinationBuilder 组件的范围。只需创建一个嵌入两个 div 的公共 div(或类似元素)元素,并在其中应用组件 x-data ,这样每个 div 都可以访问组件的范围。

Dauros
2022-04-04