Для реализации функционала "live search" на Nuxt.js существует несколько подходов. Один из наиболее распространенных и простых способов - использование компонентов и фильтров.
- Создайте новый компонент, который будет отображать поле ввода для поиска и результаты поиска. Назовем его "LiveSearch.vue". В этом компоненте вы можете использовать элементы <input> и <ul> для отображения поля ввода и списка результатов соответственно.
- В компоненте "LiveSearch.vue" добавьте входной параметр "items", который будет содержать список элементов для поиска.
- Добавьте отслеживание изменений во входных параметрах "items" и "searchTerm". В методе "watch" вы можете обновлять список результатов поиска при необходимости.
- Добавьте метод "filterItems", который будет фильтровать список элементов на основе введенного пользователем поискового запроса. Вы можете использовать метод «filter» для получения нового списка элементов, соответствующих поисковому запросу.
- Используйте фильтр "filterItems" в шаблоне компонента для отображения отфильтрованных результатов поиска. Вы можете использовать директиву "v-for" для отображения каждого результата поиска в отдельном элементе списка.
- Добавьте обработчик события, чтобы отслеживать изменения в поле ввода. При каждом изменении запускайте метод "filterItems", передавая в него значение поля ввода.
- В основном компоненте, где вы хотите использовать "live search", импортируйте компонент "LiveSearch.vue" и передайте входные параметры "items" с данными для поиска.
- Разместите компонент "LiveSearch.vue" в нужном месте шаблона основного компонента. Теперь вы должны увидеть поле ввода и результаты поиска в реальном времени на вашей странице.
Пример кода компонента "LiveSearch.vue":
<template>
<div>
<input type="text" v-model="searchTerm" @input="filterItems" placeholder="Search...">
<ul>
<li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
props: {
items: {
type: Array,
required: true
}
},
data() {
return {
searchTerm: '',
filteredItems: []
}
},
watch: {
items() {
this.filterItems();
}
},
methods: {
filterItems() {
this.filteredItems = this.items.filter(item => {
return item.name.toLowerCase().includes(this.searchTerm.toLowerCase());
});
}
}
}
</script>
Использование компонента "LiveSearch.vue" в основном компоненте:
<template>
<div>
<live-search :items="items"></live-search>
</div>
</template>
<script>
import LiveSearch from '@/components/LiveSearch.vue';
export default {
components: {
LiveSearch
},
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
// Другие элементы
]
}
}
}
</script>
Это базовый пример, основанный на использовании компонентов и фильтров в Nuxt.js для создания функционала "live search". Вы можете дальше настроить этот компонент в соответствии с вашими потребностями и стилями оформления.