No estoy del todo seguro de cómo alternar la ventana emergente en función de un booleano, en mi caso: si hay resultados de búsqueda. Pensé que podría usar el atributo abierto. ¡Cualquier ayuda es apreciada!
Para resumir este componente:
<template> <form :action="action" method="GET" class="flex-1"> <Popover :open="searchResults.length > 0" class="relative w-full"> <PopoverOverlay :class="`bg-black ${open ? 'fixed inset-0 opacity-10' : 'opacity-0'}`" @click="() => emptySearchResults()" /> <div class="relative"> <label for="search" class="sr-only">Search...</label> <input id="search" v-model="searchTerm" type="search" placeholder="Search..." class="h-10 w-full px-4 py-2 text-sm rounded-lg placeholder-gray-400 focus:outline-none" > </div> <PopoverPanel class="absolute top-full right-0 w-full mt-3 py-2 px-2 bg-gray-700 rounded-lg shadow-lg"> <a v-for="result in searchResults" :key="result.id" :href="result.url" class="flex items-center font-semibold p-2 text-sm text-white leading-none rounded-lg hover:bg-gray-600" > <span class="mr-3 py-1 px-2 text-xs text-gray-900 leading-none bg-gray-300 rounded-full"> {{ result.module }} </span> {{ result.title }} </a> </PopoverPanel> </Popover> </form> </template> <script setup> import { ref, watch } from 'vue'; import { Popover, PopoverPanel } from '@headlessui/vue'; import debounce from '@/Helpers/debounce'; import xhr from '@/Helpers/xhr'; const searchTerm = ref(''); const searchResults = ref([]); const getSearchResults = debounce(async (value) => { if (value === '') return; const { data } = await xhr.post('search', { q: value }); const { results } = await data; searchResults.value = results; }, 250); const emptySearchResults = () => { searchTerm.value = ''; searchResults.value = []; }; watch(searchTerm, (value) => getSearchResults(value)); </script>