NuxtJS поиск
Выводим форму поиска контента на NuxtJS
В предыдущем уроке мы добавили пагинацию в наш блог на NuxtJS Content.
Сейчас добавим форму поиска записей. Для лучшего понимания лучше открыть предыдущую статью в новой вкладке.
В моем примере я добавлю в pages/blog/index.vue следующий код:
<input v-model="query" type="search" autocomplete="off" placeholder="Поиск" />
Далее в этом же файле редактирую код из прошлого урока добавив условие search(query) в getPostsOfPage
const pagination = {
getPostsOfPage($content, page, query) {
return $content('blog')
.sortBy('date', 'desc')
.skip(10 * (page - 1))
.limit(10)
.search(query)
.fetch()
},
async getNumberOfPages($content, query) {
return query ? Math.ceil((await $content('blog').search(query).fetch()).length / 10) : Math.ceil((await $content('blog').only([]).fetch()).length / 10)
},
}
getNumberOfPages редактировали чтобы верное количество страниц в пагинации отображалось и при поиске.
Далее пишу кусками код который нужно поменять в коде из прошлого урока.
const query = route.query.search
const [posts, pageCount] = await Promise.all([
pagination.getPostsOfPage($content, page, query),
pagination.getNumberOfPages($content, query),
])
data() {
return {
query: this.$route.query.search,
posts: [],
pageCount: 1
}
}
watch: {
async page() {
this.$router.replace({ path: '/blog', query: { page: this.page } })
this.posts = await pagination.getPostsOfPage(this.$content, this.page, this.query)
this.pageCount = await pagination.getNumberOfPages(this.$content, this.query)
},
async query () {
this.$router.replace({ path: '/blog', query: { search: this.query } })
this.posts = await pagination.getPostsOfPage(this.$content, this.page, this.query)
this.pageCount = await pagination.getNumberOfPages(this.$content, this.query)
this.page = 1
}
}
Опубликовано 8 ноября 2021 г. в категории: NuxtJS
Если Вам необходимо внедрить данную разработку на свой проект, свяжитесь со мной, обсудим цену и срок.
Связаться со мной
