Vue.js 用 computed 跟 filter 做一個簡易搜尋功能

這個是 2 年前寫的一個 Demo，最近在整理 GitHub上 的專案時翻了出來。

忘記那時是看哪一個教學後寫成的，裡面有用到蠻實用的 Vue 功能，因此決定花點時間優化一下，並寫成這篇筆記文。

Demo 說明

本筆記最後會完成的頁面如下：

https://letswritetw.github.io/letswrite-vue-search/

Demo 頁的功能很簡單，分成 2 部份：

1. 抓紐約時報中文網的 RSS，並製作成列表
2. 在搜尋框的 input 輸入關鍵字時，列表會濾出關鍵字裡有的新聞標題

頁面樣式的部份直接用 Bulma。

JavaScript framework 用 Vue.js。

抓 RSS 的 XML，並轉成 JSON

抓 RSS 的 XML 比較簡單，就是 AJAX 的 URL 用成 RSS 的網址就好，比方紐約時報中文網，正體 RSS 的網址如下：

https://cn.nytimes.com/rss/zh-hant/

那在 POST 時就直接 POST 這個網址就行。

比較麻煩的，是回傳的資料是 XML 格式，要把它轉成 JSON 來使用。

August 這邊筆記 2 種方式，一種是簡單，一種是有點麻煩的。

RSS to JSON 線上工具

直接用別人開發好的線上工具是最簡單的，但線上工具通常都要收費。

有一個蠻好用的線上工具「rss to json online converter」，它可以直接幫你把 RSS 的網址，變成它們 API 轉譯成 JSON 後的網址，AJAX 後就可以直接得到 JSON。

這套線上工具有 Free / Basic / Pro 等三種版本，免費版的限一天一萬次以下的請求，一次請求最多可以拿到 25 個 Feeds（Sorry，不知道怎麼翻譯 Feeds 比較好懂）。

這邊筆記一下使用方式，首先，進到他們的官網後會看到以下介面：

在圖片中標紅框的部份，輸入 RSS 的網址，比方我們要把紐約時報中文網的 RSS 轉成 JSON，那就把 RSS 的網址輸入進去，然後按下「Convert to JSON」：

會看見下面預覽框出現 RSS 轉成 JSON 後的樣子，還會有一行 API call，那個網址就是 AJAX 的 URL。

如果沒註冊帳號拿到 API Key，回傳的 feeds 最多是 10 筆，想到免費版的 25 筆就要註冊，登入後 API call 的 URL 就會帶上 API Key 的參數，輸入網址那個 input 右下角的 Advanced options 點開後，就可以更改「Items count」了：

Google Apps Script 寫一個 XML to JSON

這個稍微麻煩一點，而且老實說 Google Apps Script 的文件沒全看完，完整的寫法是 Google 到別人的後拿來修改，參考的原始碼網址在這：Convert XML to JSON with Apps Script。

這一個方法步驟如下：

1. 在 Google Drive 新增一個 Google Apps Script 的檔案
2. 檔案中輸入程式碼
3. 發布，取得 AJAX 的 URL

第 2 步輸入的程式碼如下：

關於 GAS 的操作可以參考這篇，這邊就不多寫：

Google Apps Script 基本使用：跨網域 AJAX、接 Firebase

發布完取得 URL 後，頁面上只要 POST 並整理取回來的資料即可，範例 code 如下：

整理完資料，最後就是用一個 v-for 把新聞列表塞進頁面裡就行。

Computed + filter 執行搜尋功能

最後這段就是本篇筆記的重點了，首先看一下 HTML 上寫 v-for 的部份：

<a v-for="n in filterSearch" :href="n.url">{{ n.title }}</a>

v-for 上的 filterSearch 是 Vue 的 computed，而不是常用的 data，August 記得當時看教學看到這段就覺得「哇~原來可以這樣用啊」。

computed: {
  filterSearch() {
    return this.news.filter(searchResult => searchResult.title.match(this.searchWords));
  }
}

this.news 就是上一段中從 RSS 取得並整理過的 JSON。

this.searchWords 就是搜尋的關鍵字。

這段的意思就是：回傳有出現關鍵字的新聞標題。

配合 ES6 的寫法，一行就可以搞定了，不得不說 Vue 跟 ES6 是偉大的發明。

原始碼、Demo

本篇的原始碼整理過放上 GitHub 了：

https://github.com/letswritetw/letswrite-vue-search

最後完成的 Demo 連結這邊再放一次：

https://letswritetw.github.io/letswrite-vue-search/

Summary

Article Name

Vue.js 用 computed 跟 filter 做一個簡易搜尋功能

Description

本篇大綱：Demo 說明。抓 RSS 的 XML，並轉成 JSON。RSS to JSON 線上工具。Google Apps Script 寫一個 XML to JSON。Computed + filter 執行搜尋功能。原始碼、Demo。

August

Augustus

Let's Write

Let's Write

https://letswritetw.github.io/letswritetw/dist/img/logo_512.png