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

Как обработать случай, когда поиск с использованием функции 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, который выведет "Ничего не найдено"
<pre><code class="javascript">const filteredProducts = computed(() =&gt; {
  const search = searchQuery.value.toLowerCase();
  return search.length &gt; 2
    ? data.value.filter(n =&gt; n.title.toLowerCase().includes(search))
    : null;
});</code></pre> <br/> <pre><code class="html">&lt;ul v-if="filteredProducts" class="search-result"&gt;
  &lt;li v-if="!filteredProducts.length"&gt;
    &lt;h3&gt;ничего не найдено&lt;/h3&gt;
  &lt;/li&gt;
  &lt;li v-for="n in filteredProducts"&gt;
    &lt;div&gt;
      &lt;Image :src="n.image" :alt="n.title" width="40" height="40" /&gt;
    &lt;/div&gt;
    &lt;h3&gt;{{ n.title }}&lt;/h3&gt;
    &lt;div&gt;
      &lt;p&gt;{{ n.price }}&lt;/p&gt;
    &lt;/div&gt;
  &lt;/li&gt;
&lt;/ul&gt;</code></pre>
Похожие вопросы