Для реализации функционала "live search" на Nuxt.js существует несколько подходов. Один из наиболее распространенных и простых способов - использование компонентов и фильтров.
1. Создайте новый компонент, который будет отображать поле ввода для поиска и результаты поиска. Назовем его "LiveSearch.vue". В этом компоненте вы можете использовать элементы <input> и <ul> для отображения поля ввода и списка результатов соответственно.
2. В компоненте "LiveSearch.vue" добавьте входной параметр "items", который будет содержать список элементов для поиска.
3. Добавьте отслеживание изменений во входных параметрах "items" и "searchTerm". В методе "watch" вы можете обновлять список результатов поиска при необходимости.
4. Добавьте метод "filterItems", который будет фильтровать список элементов на основе введенного пользователем поискового запроса. Вы можете использовать метод «filter» для получения нового списка элементов, соответствующих поисковому запросу.
5. Используйте фильтр "filterItems" в шаблоне компонента для отображения отфильтрованных результатов поиска. Вы можете использовать директиву "v-for" для отображения каждого результата поиска в отдельном элементе списка.
6. Добавьте обработчик события, чтобы отслеживать изменения в поле ввода. При каждом изменении запускайте метод "filterItems", передавая в него значение поля ввода.
7. В основном компоненте, где вы хотите использовать "live search", импортируйте компонент "LiveSearch.vue" и передайте входные параметры "items" с данными для поиска.
8. Разместите компонент "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". Вы можете дальше настроить этот компонент в соответствии с вашими потребностями и стилями оформления.