Laravel Alpine.js事件处理程序触发内部livewire单击处理程序两次

大家好，看到这个的人都好

我有一个简单的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>

{{$trigger}}
{{$slot}

我在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>

@forelse（$options作为$option）

{{$option}}

@空的

未找到任何结果

@endforelse

我在列表上添加了@click处理程序，以便在从列表中选择选项时隐藏。问题是，有了这个处理程序，有时候addItem（）方法会被调用两次，我会在所选列表中得到重复的

我想一个问题是什么是更好的方法，但我也想知道为什么会发生这种情况？这是有意的吗？是虫子吗

---

谢谢

通常情况下，类似这样的列表中的间歇性单击触发似乎归结为

电线：键

不唯一。。您可能希望使用

$选项本身作为键，或者将该选项与其他选项组合使用，以确保其唯一性。通常情况下，在这样的列表中间歇单击触发似乎归结为
连线：键
不唯一。。您可能希望使用
$选项本身作为键，或者将该选项与其他选项组合使用，以确保其唯一性。