laravel - Alpine.js 事件处理程序触发内部 livewire 点击处理程序两次

Question

看到这个的人你好！

我有一个简单的 livewire 组件来显示/隐藏其中一个有角度的材料样式芯片自动完成的下拉列表：

<span x-data="{ open: false }">
    <span @click="open = true">
        {{ $trigger }}
    </span>

    <span x-show="open" @click="open = false" @click.away="open = false">
        {{ $slot }}
    </span>
</span>

我在包含输入字段、下拉列表和选定芯片的 livewire 组件中使用它，如下所示：

    <x-input-dropdown>
        <x-slot name="trigger">
            <input type="text" wire:model="search">
        </x-slot>

        <ul>
            @forelse($options as $option)
                <li
                    wire:key="{{$loop->index}}"
                    wire:click="addItem('{{ $option }}')">
                       {{ $option }}
                </li>

            @empty

                <li>
                    No results found
                </li>

            @endforelse
        </ul>
    </x-input-dropdown>

当我从列表中选择一个选项时，我在列表本身上添加了 @click 处理程序以隐藏。问题是，有了那个处理程序，有时 addItem() 方法会被调用两次，我会在所选列表中得到重复项。

我想一个问题是什么是更好的方法，但我也想知道为什么会这样？这是故意的吗？它是一个错误吗？

谢谢！

标签： laravellaravel-livewirealpine.js