這個是2年前寫的一個Demo，最近在整理Github上的專案時翻了出來。
忘記那時是看哪一個教學後寫成的，裡面有用到蠻實用的Vue功能，因此決定花點時間優化一下，並寫成這篇筆記文。
Demo說明
本筆記最後會完成的頁面如下：
https://letswritetw.github.io/letswrite-vue-search/
Demo頁的功能很簡單，分成2部份：
- 抓紐約時報中文網的RSS，並製作成列表
- 在搜尋框的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來使用。
Augustus這邊筆記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的function
這個稍微麻煩一點，而且老實說Google Apps Script的文件沒全看完，完整的寫法是Google到別人的後拿來修改，參考的原始碼網址在這：Convert XML to JSON with Apps Script。
這一個方法步驟如下：
- 在Google Drive新增一個Google Apps Script的檔案
- 檔案中輸入程式碼
- 發布，取得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，Augustus記得當時看教學看到這段就覺得「哇~原來可以這樣用啊」。
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/
留言