绑定到 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