Методы реализации фильтров поиска в Vue.js

В Vue.js существует несколько методов реализации фильтров поиска. Вот некоторые из часто используемых методов:

  1. Вычисляемые свойства. Вы можете создать вычисляемое свойство, которое фильтрует данные на основе поискового запроса. Вычисляемое свойство обновляется автоматически при каждом изменении поискового запроса или данных.

  2. Метод фильтра. Вы можете использовать встроенный метод filterмассивов JavaScript для фильтрации данных на основе поискового запроса. Этот метод создает новый массив с элементами, которые соответствуют критериям фильтра.

  3. Наблюдатели. Вы можете определить наблюдателя для поискового запроса и выполнять логику фильтрации при каждом изменении поискового запроса. Этот метод позволяет выполнять собственные операции при фильтрации данных.

  4. Пользовательские методы: вы можете создавать свои собственные методы для обработки логики фильтрации. Эти методы можно вызывать при каждом изменении поискового запроса или при возникновении определенного события.

Вот пример того, как можно реализовать поисковый фильтр с использованием вычисляемых свойств в Vue.js:

<template>
  <div>
    <input type="text" v-model="searchQuery" placeholder="Search...">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' },
      ],
      searchQuery: '',
    };
  },
  computed: {
    filteredItems() {
      const query = this.searchQuery.toLowerCase();
      return this.items.filter(item => item.name.toLowerCase().includes(query));
    },
  },
};
</script>