[筆記] 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 相關文章

★全文分享★  [筆記] CodeSandbox 線上編輯器 模擬前端框架
[筆記] CodeSandbox 線上編輯器 模擬前端框架
隨著前端框架的發展,當需要多人編輯、展示或是教學時,CodeSandbox 提供了一個很好的環境來給予模擬。除了 Vue 以外,React, Angular, Vanilla……等等都可以良好支援,同時也可以模擬專案資料夾結構
★全文分享★  [筆記] 工字型樣板,長方形依照比例縮放
[筆記] 工字型樣板,長方形依照比例縮放
這回要挑戰工字型( I-Shape )的顯示樣板。同時,上頭要疊加有個會隨著數值比例而放大縮小的一個長方形。這邊筆記下要如何用 CSS 和 Vue 的綁定 class 樣式來實現。需求這回的樣式需求如下:1. 上方
★全文分享★  [筆記] Element-UI 的自定義表格邊框樣式
[筆記] Element-UI 的自定義表格邊框樣式
Element UI 的表格算是非常常用的模組化套件之一,不過其表格邊框樣試算是非常難以處理的。這邊筆記一下如何客製化的一些步驟(頓時覺得辦公室文書軟體要自定義樣式簡單多了)。需求這回的樣式
★全文分享★  [筆記] Vue 關於 slot-scope 的簡易認知
[筆記] Vue 關於 slot-scope 的簡易認知
Vue 的 slot 系列使用方法,頭一回在 Element-UI 這個模組上看見,覺得用法挺神奇的,於是便筆記一下個人對 slot 的理解,以及怎樣的場景會使用到。核心概念slot 可以分為匿名、具名以及包含資料的 S
★全文分享★  [筆記] Vue Watch 監聽並延後發送請求
[筆記] Vue Watch 監聽並延後發送請求
當使用 Vue Watch 的事件監聽時,若有要觸發傳送 XML 之類的事件時,屢屢發送的話會造成後端伺服器的負擔。你可以運用簡單的 Promise + setTimeout 的技巧,就可以解決這個問題。背後原理1. 先在要啟用
★全文分享★  [筆記] Element UI Table 表格表頭縱向顯示
[筆記] Element UI Table 表格表頭縱向顯示
這回在從事公司專案時,遇上了一個稍嫌難解的問題。在 Element UI Table 表格選項內,它預設是抓取每一個物件的 Key 值名稱,然後對應的資料是由上往下顯示的。不過若你想要客製化的將每一個物件
★全文分享★  [筆記] Vue SCSS 使用 Deep Selectors
[筆記] Vue SCSS 使用 Deep Selectors
在 Vue Sass 的使用方法上,若你有和其他的 Vue 套件一同使用,常會發生 css 選取困難的問題。Vue Loader 有提供所謂的 Deep Selectors,可以幫助你解決這些困擾,順利改動套件的樣式。程式碼示範// scss v
★全文分享★  [筆記] Vue 使用 SCSS
[筆記] Vue 使用 SCSS
運用 Vue-cli 建立的專案,若要使用 SCSS 來較為語意化的管理自己的 css 檔,需要事先做一些設定。這邊筆記下直接在 .vue 中使用的方法和如何引入外部的 .scss 文件,並讓 vue 可以載入 loader 讀取編譯
★全文分享★  [筆記] 自定義 Element UI 標題欄位遇上 Vue/no-unused error 的解決方法
[筆記] 自定義 Element UI 標題欄位遇上 Vue/no-unused error 的解決方法
在 Vue template 的檔案,有時會需要運用到 slot-scope=”something” 的語法,但實質上並沒有用到 something 的物件內容。這時可以傳個 {} 空物件進去,就不會報 Vue/no-unused error 了。程式碼示範這個 case 是發生
★全文分享★  [筆記] Vue 生命週期
[筆記] Vue 生命週期
每一個 Vue Instance 在創建時,都會經歷過一個完整的生命週期,這算是 Vue 的初始化過程。在這個過程中,官方預設了許多的 hook 來提供開發者對於不同的階段做操作。生命週期圖週期類別beforeCreate
★全文分享★  [筆記] Vue 單元測試初探
[筆記] Vue 單元測試初探
隨著程式開發越來越龐大,那麼以「程式」測試「程式」是一件值得學習的投資了。除了節省時間外,也可以藉機測試一下程式的邏輯是否如你所預期的。這邊筆記下 Vue 的前端測試的初探與設定。
★全文分享★  [筆記] Vue2 Perfect-Scrollbar 置底開始
[筆記] Vue2 Perfect-Scrollbar 置底開始
Vue 的 Perfect-Scrollbar 套件,是 Vue 中滿常使用的捲軸選單的套件。雖說有內建的一些自訂樣式的選項( 可用 options 載入),不過若要像聊天室一樣,將捲軸條永遠置底,這個就得自己另外設定。程式碼
★全文分享★  [筆記] Vue 的狀態管理 Vuex 實作心得
[筆記] Vue 的狀態管理 Vuex 實作心得
Vuex 是 Vue 中用於狀態管理的工具,你可以將每個頁面、元件都會用到的「狀態」(像是:登入的使用者資料),儲存在前端使用者的瀏覽器中。因為在頁面的切換中,並不會每次都向後端伺服器認證
★全文分享★  [筆記] Vue 自訂綁定 style 標籤
[筆記] Vue 自訂綁定 style 標籤
Vue 中的 v-bind 有一些預設的 style 選項如 :disabled。不過若要客製化的 style 顯示,像是 visibility:hidden 之類的,則可用 :style ={your-customized-style} 來搞定。語法// 若以綁定 visibility:hidden 選項,並依照一定
★全文分享★  [筆記] Body-Parser 無法解析的 FormData 解決方案 – multer
[筆記] Body-Parser 無法解析的 FormData 解決方案 – multer
運用 express 的框架來架設後端的 Node.js 伺服器時,當遇上前端傳來的表單資料為 multipart/form-data 格式時,那麼 body-parser 套件是不支援的。這時可以運用 multer 套件來解決這個問題。使用範例1.首先先
★全文分享★  [筆記] Vue 頁面元件定時自動跳轉
[筆記] Vue 頁面元件定時自動跳轉
當 Vue 頁面需要定時自動跳轉的功能時,只需在該頁面的 <script> 標籤內撰寫一小段程式碼即可。在撰寫如 404 自動跳轉時可以不必再外掛其他的 JavaScript 了。步驟// 在 Vue 生命週期的 created 階段
★全文分享★  [筆記] Vue 刷新當前頁面
[筆記] Vue 刷新當前頁面
Vue 的使用上,若是要進行完某個操作後重新刷新「當前頁面」的話,用單純的 redirect 是沒有辦法成功跳轉的。這邊要筆記下可以成功實現這個目標的方法。程式碼示範// 在 App.vue 進行設定<template
★全文分享★  [全端開發] 打造一個公開聊天室 Vue.js+MySQL+Socket.io+passport-jwt
[全端開發] 打造一個公開聊天室 Vue.js+MySQL+Socket.io+passport-jwt
這回實際演練來打造一個即時聊天室來練功,使用者可以分為管理員和一般資格。其中使用到的主力套件和技術有:Vue.js, MySQL, Socket.io, passwort & passport-jwt, JavaScript, CSS, Bootstrap。規格開設 (SPEC) 使
★全文分享★  [筆記] BootstrapVue Pagination Vue 分頁套件使用
[筆記] BootstrapVue Pagination Vue 分頁套件使用
在網路世界中常用的前端 css 套件 – Bootstrap,搭配上前端框架 Vue,有好心人已經統整成了 BootstrapVue 的套件,讓 Bootstrap 內的許多元件(components)有更多的運用。這回是要採用裡頭的 Pagination,並整合
★全文分享★  [筆記] Vue 避免 ESLint 的 Unexpected Console Statement
[筆記] Vue 避免 ESLint 的 Unexpected Console Statement
當運用官方套件迅速建立一個 Vue 專案後,若你是採用 ESLint 的規則,那麼在除蟲時會遇見 Unexpected console statement 的錯誤,這是由於 ESLint 的預設規則為 no-console 所導致的。這篇記載下解決這問題方
★全文分享★  [筆記] 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瀏覽人氣:85