V01 Vue.js 实战教程 - 基础篇10.2. 显示搜索结果
简介
本小节中，我们将新建一个搜索结果页面，并根据搜索值返回对应的搜索结果。
返回搜索结果
1、打开 src/store/getters.js 文件，在代码的最后面，导出派生状态 getArticlesByKeyword ：
src/store/getters.js
.
.
.
// 根据关键字 keyword 返回搜索结果
export const getArticlesByKeyword = (state, getters) => (keyword) => {
let articles = getters.computedArticles
// 搜索结果
let results = []
if (Array.isArray(articles)) {
articles.forEach((article) => {
let { articleId, title, content } = article
// 该正则表示文章标题或内容中的关键字
const regex = new RegExp(`(${keyword})`, 'gi')
if (title.indexOf(keyword) !== -1 || content.indexOf(keyword) !== -1) {
// url 是文章中没有的数据，我们结合 articleId 拼出完整的路径
const url = `${location.origin}/articles/${articleId}/content`
// 给文章标题中的关键字加上高亮，$1 匹配第一个括号的内容...
关于 LearnKu
粤公网安备 44030502004330号