Поиск на сайте. Как сделать «ничего не найдено»?

Question

[Lahma]

Привет.
Сделал поиск с помощью computed()
Не пойму как быть когда ничего не найдено?

Сейчас когда находится:



Сейчас когда ничего не находится:

<script setup lang='ts'>
import { ref, computed } from 'vue'
import { useAxios } from '@vueuse/integrations/useAxios'

import InputText from 'primevue/inputtext'
import Image from 'primevue/image'

const {
  data,
  isLoading,
  isFinished,
  error
} = useAxios('https://fakestoreapi.com/products')

const searchQuery = ref('')

const filteredProducts = computed(() => {
  if (!searchQuery.value.length) {
    return
  }

  if (searchQuery.value.length > 2) {
    return data.value.filter((product: any) => product.title.toLowerCase().includes(searchQuery.value.toLowerCase())) 
  }
})

console.log(filteredProducts)

</script>

<template>
  <div class="search">
    <InputText v-model="searchQuery" placeholder="search" fluid />

    <ul v-if="filteredProducts" class="search-result">
      
      <li v-for="product in filteredProducts">
        
        <div>
          <Image :src="product.image" :alt="product.title" width="40" height="40" />
        </div>
        
        <h3>{{ product.title }}</h3>
        
        <div>
          <p>{{ product.price }}</p>
        </div>
      </li>
    </ul>

  </div>
</template>

Answer 1

[0xD34F]

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>

Comments

[Lahma]

Очень спасибо!

Answer 2

[setupx]

Если у тебя есть v-if="filteredProducts", сделай v-else, который выведет "Ничего не найдено"