Как вывести сообщение "ничего не найдено" на сайте при поиске?

Как обработать случай, когда поиск с использованием функции computed() не возвращает результатов?
  • 22 августа 2024 г. 13:23
Ответы на вопрос 3
1. Для вывода сообщения "ничего не найдено" на сайте при поиске можно использовать следующий код в шаблоне сайта:

```
{% if results %}
    <!-- Вывод результатов поиска -->
{% else %}
    <p>Ничего не найдено</p>
{% endif %}
```

2. Для обработки случая, когда поиск с использованием функции `computed()` не возвращает результатов, можно использовать условный оператор `if` для проверки наличия данных в переменной, которая хранит результат поиска. Например, если `searchResults` содержит результаты поиска, можно использовать следующий код:

```javascript
if (searchResults.length === 0) {
    console.log('Ничего не найдено');
} else {
    // Обработка результатов поиска
}
```
Если у тебя есть v-if="filteredProducts", сделай v-else, который выведет "Ничего не найдено"
const filteredProducts = computed(() => {
  const search = searchQuery.value.toLowerCase();
  return search.length > 2
    ? data.value.filter(n => n.title.toLowerCase().includes(search))
    : null;
});

<ul v-if="filteredProducts" class="search-result">
  <li v-if="!filteredProducts.length">
    <h3>ничего не найдено</h3>
  </li>
  <li v-for="n in filteredProducts">
    <div>
      <Image :src="n.image" :alt="n.title" width="40" height="40" />
    </div>
    <h3>{{ n.title }}</h3>
    <div>
      <p>{{ n.price }}</p>
    </div>
  </li>
</ul>
Похожие вопросы