Блог

Я не совсем уверен, как переключить всплывающее окно на основе логического значения, в моем случае: если есть результаты поиска. Я подумал, что мог бы просто использовать атрибут open. Любая помощь будет признательна!

Подводя итог этому компоненту:

• Введите поисковый запрос во входных данных
• Выполняется вызов API, и результаты возвращаются из API
• Затем следует открыть всплывающую панель

 lt;templategt;  lt;form :action="action" method="GET" class="flex-1"gt;  lt;Popover :open="searchResults.length gt; 0" class="relative w-full"gt;  lt;PopoverOverlay  :class="`bg-black ${open ? 'fixed inset-0 opacity-10' : 'opacity-0'}`"  @click="() =gt; emptySearchResults()"  /gt;   lt;div class="relative"gt;  lt;label for="search" class="sr-only"gt;Search...lt;/labelgt;  lt;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"  gt;  lt;/divgt;   lt;PopoverPanel class="absolute top-full right-0 w-full mt-3 py-2 px-2 bg-gray-700 rounded-lg shadow-lg"gt;  lt;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"  gt;  lt;span class="mr-3 py-1 px-2 text-xs text-gray-900 leading-none bg-gray-300 rounded-full"gt;  {{ result.module }}  lt;/spangt;   {{ result.title }}  lt;/agt;  lt;/PopoverPanelgt;  lt;/Popovergt;  lt;/formgt; lt;/templategt;  lt;script setupgt; 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) =gt; {  if (value === '') return;   const { data } = await xhr.post('search', { q: value });  const { results } = await data;   searchResults.value = results; }, 250); const emptySearchResults = () =gt; {  searchTerm.value = '';  searchResults.value = []; };  watch(searchTerm, (value) =gt; getSearchResults(value)); lt;/scriptgt;