[筆記] Vue.js 前端分頁、搜尋表格內容 – 運用 props, data, computed, methods, watch

運用 Vue.js 前端框架,將發送到後端 API 請求的回傳 json 檔案,在頁面上做出分頁、搜尋表格的內容,而不用屢次變動資料就對後端發送請求。
vue.js logo vue


實作需求

1.分頁表格元件 (component) 的資料由父層的頁面提供
2.分頁接收到父層的資料後,依序進行 methods, data 和 computed
3.用 watch 來監聽 data 內的變數是否有變化

常見問題

1. computed 與 method 的區別?

最大的區別為 computed 會將輸出的結果存下來,而 method 不會。

在以下例子中,頁碼是需要一直變化的,所以放在 methods 中。至於分頁需求要用來操作陣列的 pageStart, totalPage, filterRows,其結果是要存下來以供篩選和搜尋用的,所以用 computed。

methods 需要綁定事件來啟動,而 computed 是只要相關的值有變化就會重新計算。

2. props 的資料無法修改?

props 是屬於單向從父層到子層的傳遞,若需要對父層傳來的資料做操作(我們這邊要用 slice 來修改陣列),那麼可以新增一個變數來複製一份父層資料,然後回傳這個變數修改後的結果就好。

3. watch 的意義?

顧名思義就是監聽某個數值的變化。因為每次執行搜尋,需要將 data 內的 currentPage 變數修改回 1,這時就可以用 watch 來監聽 filterRows 的狀況。每當 filterRows 執行時,就將 this.currentPage = 1 。

程式碼展示

參考資料

1. [VueJS-V2] 在 v-for 列表完成分頁功能
2. [VueJS-V2] 在 v-for 列表完成分頁功能 展示碼
3. [Vue學習筆記](七)計算屬性、監聽器、過濾器 — computed, watch,filter
4. Vue.js 09 – Watch
5. vue.js 中 data, prop, computed, method,watch 介紹
6. Handling unexpected side effect in computed properties – VueJS


其他 Vue.js 相關文章

★全文分享★  [筆記] Vue 按鈕 / 篩選資料架構
[筆記] Vue 按鈕 / 篩選資料架構
這是一篇在 Vue 上實作按鈕 / 篩選器的資料架構筆記。說明按鈕設計方式 將一個個
★全文分享★  [指南] Vue.js 搭配 Docker 進行佈署
[指南] Vue.js 搭配 Docker 進行佈署
Docker 是個運用了虛擬化技術的套件,讓不同電腦上可以正常執行同樣的電腦程式。
★全文分享★  [筆記] Vue-Carousel 輕量化輪撥套件介紹
[筆記] Vue-Carousel 輕量化輪撥套件介紹
說到 Carousel 輪撥系列的套件,Swiper 可以說是滿知名的一個,也有整合版的 Vue Awesom
★全文分享★  [筆記] 在 Vue 中正確引用 src/assets 裡的圖片
[筆記] 在 Vue 中正確引用 src/assets 裡的圖片
在 Vue 專案內放於 src/assets 裡面的圖片檔案,會在打包 npm run build 的時候一起被整合
★全文分享★  [筆記] 將 Vue 專案自動佈署到 Github Pages 上
[筆記] 將 Vue 專案自動佈署到 Github Pages 上
每次完成了一個 Vue 專案,要佈署到 Github 上,往往要手動執行 npm run build 之類的指
★全文分享★  [筆記] Vue 如何監控視窗寬度,並讓每個 component 可以取用
[筆記] Vue 如何監控視窗寬度,並讓每個 component 可以取用
Vue 的專案裡,若要監測使用者的視窗大小寬度,最簡便的方法就是在預設的根目錄
★全文分享★  [指南] 在 Vue 專案中,修改 樣式方法
[指南] 在 Vue 專案中,修改 <body data-lazy-src=
★全文分享★  [筆記] 從 Vue CLI 3 開始建立規模化專案
[筆記] 從 Vue CLI 3 開始建立規模化專案
用 Vue CLI 3,可以快速的建立一個 Vue 專案。雖說是方便,但要能夠規模化的管理 vuex
★全文分享★  [筆記] 運用 Moment.js 製作 AM / PM 時間外掛
[筆記] 運用 Moment.js 製作 AM / PM 時間外掛
運用 Vue 和 Moment.js 來將 input-time 的 12 小時制時間,轉換成 24 小時制傳送到後端。
★全文分享★  [筆記] CodeSandbox 線上編輯器 模擬前端框架
[筆記] CodeSandbox 線上編輯器 模擬前端框架
隨著前端框架的發展,當需要多人編輯、展示或是教學時,CodeSandbox 提供了一個很
★全文分享★  [筆記] 工字型樣板,長方形依照比例縮放
[筆記] 工字型樣板,長方形依照比例縮放
這回要挑戰工字型( I-Shape )的顯示樣板。同時,上頭要疊加有個會隨著數值比例而放
★全文分享★  [筆記] Element-UI 的自定義表格邊框樣式
[筆記] Element-UI 的自定義表格邊框樣式
Element UI 的表格算是非常常用的模組化套件之一,不過其表格邊框樣試算是非常難以
★全文分享★  [筆記] Vue 關於 slot-scope 的簡易認知
[筆記] Vue 關於 slot-scope 的簡易認知
Vue 的 slot 系列使用方法,頭一回在 Element-UI 這個模組上看見,覺得用法挺神奇的,
★全文分享★  [筆記] Vue Watch 監聽並延後發送請求
[筆記] Vue Watch 監聽並延後發送請求
當使用 Vue Watch 的事件監聽時,若有要觸發傳送 XML 之類的事件時,屢屢發送的話會
★全文分享★  [筆記] Element UI Table 表格表頭縱向顯示
[筆記] Element UI Table 表格表頭縱向顯示
這回在從事公司專案時,遇上了一個稍嫌難解的問題。在 Element UI Table 表格選項內
★全文分享★  [筆記] Vue SCSS 使用 Deep Selectors
[筆記] Vue SCSS 使用 Deep Selectors
在 Vue Sass 的使用方法上,若你有和其他的 Vue 套件一同使用,常會發生 css 選取困難
★全文分享★  [筆記] Vue 使用 SCSS
[筆記] Vue 使用 SCSS
運用 Vue-cli 建立的專案,若要使用 SCSS 來較為語意化的管理自己的 css 檔,需要事先
★全文分享★  [筆記] 自定義 Element UI 標題欄位遇上 Vue/no-unused error 的解決方法
[筆記] 自定義 Element UI 標題欄位遇上 Vue/no-unused error 的解決方法
在 Vue template 的檔案,有時會需要運用到 slot-scope=”something” 的語法,但實質上並沒有
★全文分享★  [筆記] Vue 生命週期
[筆記] Vue 生命週期
每一個 Vue Instance 在創建時,都會經歷過一個完整的生命週期,這算是 Vue 的初始化
★全文分享★  [筆記] Vue 單元測試初探
[筆記] Vue 單元測試初探
隨著程式開發越來越龐大,那麼以「程式」測試「程式」是一件值得學習的投資了
★全文分享★  [筆記] Vue2 Perfect-Scrollbar 置底開始
[筆記] Vue2 Perfect-Scrollbar 置底開始
Vue 的 Perfect-Scrollbar 套件,是 Vue 中滿常使用的捲軸選單的套件。雖說有內建的一些
★全文分享★  [筆記] Vue 的狀態管理 Vuex 實作心得
[筆記] Vue 的狀態管理 Vuex 實作心得
Vuex 是 Vue 中用於狀態管理的工具,你可以將每個頁面、元件都會用到的「狀態」(像
★全文分享★  [筆記] Vue 自訂綁定 style 標籤
[筆記] Vue 自訂綁定 style 標籤
Vue 中的 v-bind 有一些預設的 style 選項如 :disabled。不過若要客製化的 style 顯示,像
★全文分享★  [筆記] Body-Parser 無法解析的 FormData 解決方案 – multer
[筆記] Body-Parser 無法解析的 FormData 解決方案 – multer
運用 express 的框架來架設後端的 Node.js 伺服器時,當遇上前端傳來的表單資料為 mult
★全文分享★  [筆記] Vue 頁面元件定時自動跳轉
[筆記] Vue 頁面元件定時自動跳轉
當 Vue 頁面需要定時自動跳轉的功能時,只需在該頁面的 <script> 標籤內撰寫一
★全文分享★  [筆記] Vue 刷新當前頁面
[筆記] Vue 刷新當前頁面
Vue 的使用上,若是要進行完某個操作後重新刷新「當前頁面」的話,用單純的 redire
★全文分享★  [全端開發] 打造一個公開聊天室 Vue.js+MySQL+Socket.io+passport-jwt
[全端開發] 打造一個公開聊天室 Vue.js+MySQL+Socket.io+passport-jwt
這回實際演練來打造一個即時聊天室來練功,使用者可以分為管理員和一般資格。
★全文分享★  [筆記] BootstrapVue Pagination Vue 分頁套件使用
[筆記] BootstrapVue Pagination Vue 分頁套件使用
在網路世界中常用的前端 css 套件 – Bootstrap,搭配上前端框架 Vue,有好心人已經統
★全文分享★  [筆記] Vue 避免 ESLint 的 Unexpected Console Statement
[筆記] Vue 避免 ESLint 的 Unexpected Console Statement
當運用官方套件迅速建立一個 Vue 專案後,若你是採用 ESLint 的規則,那麼在除蟲時
★全文分享★  [筆記] Vue-cli 輸出 console.log 的結果
[筆記] Vue-cli 輸出 console.log 的結果
使用 Vue-cli 輸出頁面結果到網頁上時,若是需要輸出錯誤結果的瀏覽器的 console.log
★全文分享★  [筆記] 解決 Vue-cli 打包後,無法顯示 Favicon 的問題
[筆記] 解決 Vue-cli 打包後,無法顯示 Favicon 的問題
Vue-cli 運用 npm run build 將專案打包成靜態檔案給後端伺服器存取後,常會遇到 Favicon
★全文分享★  [筆記] 全端開發本機端資料互通 Vue.config.js 設定
[筆記] 全端開發本機端資料互通 Vue.config.js 設定
在本機端執行前後端(全端)共同開發時,由於前後端都會各自啟用自己的伺服器,那
★全文分享★  [筆記] 解決 Vue 專案的 localhost:8080/sockjs-node 的無效請求
[筆記] 解決 Vue 專案的 localhost:8080/sockjs-node 的無效請求
這篇是解決不時在測試 Vue 專案上時,常會在瀏覽器的 console 內看見的無效 GET 請求
★全文分享★  [筆記] Vue.js & Node.js 專案初始化筆記
[筆記] Vue.js & Node.js 專案初始化筆記
這篇主要是筆記下如何快速的在本機端生成一個 Vue.js 的專案,並結合 Bootstrap 和 Nod
按讚加入粉絲團

延伸閱讀