[筆記] 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-cli 輸出 console.log 的結果
[筆記] Vue-cli 輸出 console.log 的結果
使用 Vue-cli 輸出頁面結果到網頁上時,若是需要輸出錯誤結果的瀏覽器的 console.log 結果,會因為預設的 Eslint 語法規則檢查而報錯。這在開發階段算是相當不方便的一件事。所以,這篇筆記下如何
★全文分享★  [筆記] Vue.js 前端分頁、搜尋表格內容 – 運用 props, data, computed, methods, watch
[筆記] Vue.js 前端分頁、搜尋表格內容 – 運用 props, data, computed, methods, watch
運用 Vue.js 前端框架,將發送到後端 API 請求的回傳 json 檔案,在頁面上做出分頁、搜尋表格的內容,而不用屢次變動資料就對後端發送請求。實作需求1.分頁表格元件 (component) 的資料由父層的頁面
★全文分享★  [筆記] 解決 Vue-cli 打包後,無法顯示 Favicon 的問題
[筆記] 解決 Vue-cli 打包後,無法顯示 Favicon 的問題
Vue-cli 運用 npm run build 將專案打包成靜態檔案給後端伺服器存取後,常會遇到 Favicon (每個網頁左上角的圖示) 無法正常顯示的問題。這篇筆記下各種解決這個問題的辦法。語法// favicon// 1. 將 index.html
★全文分享★  [筆記] 全端開發本機端資料互通 Vue.config.js 設定
[筆記] 全端開發本機端資料互通 Vue.config.js 設定
在本機端執行前後端(全端)共同開發時,由於前後端都會各自啟用自己的伺服器,那麼前端要怎樣在本機端模擬發送請求到後端拿資料呢?若是運用 Vue.js 的前端框架,可以利用 Vue.config.js 的檔案來
★全文分享★  [筆記] 解決 Vue 專案的 localhost:8080/sockjs-node 的無效請求
[筆記] 解決 Vue 專案的 localhost:8080/sockjs-node 的無效請求
這篇是解決不時在測試 Vue 專案上時,常會在瀏覽器的 console 內看見的無效 GET 請求如:http://localhost:8080/sockjs-node/info?t=<一串亂數>,要如何處理。步驟1.若是處在開發階段看到的話,會因為你所
★全文分享★  [筆記] Vue.js & Node.js 專案初始化筆記
[筆記] Vue.js & Node.js 專案初始化筆記
這篇主要是筆記下如何快速的在本機端生成一個 Vue.js 的專案,並結合 Bootstrap 和 Node.js 二者來產生一個前後端兼備但卻彼此分離的網路應用程式。步驟Vue.js 框架下,其網址多半會帶有 # 字樣。這是
按讚加入粉絲團

延伸閱讀

GA瀏覽人氣:12