[筆記] Vue.js 前端分頁、搜尋表格內容 – 運用 props, data, computed, methods, watch @地瓜大的飛翔旅程

章節連結

實作需求
常見問題

1. computed 與 method 的區別？
2. props 的資料無法修改？
3. watch 的意義？

程式碼展示
參考資料
其他 Vue.js 相關文章

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

實作需求

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 。

程式碼展示

// father.vue，將資料傳入
<template>
  <div class="container py-5">
    <DataWithPagination :countries="countries" />
  </div>
</template>

// children.vue
<template>
  <div>
    <!--分頁部分-->
    <div class="row justify-content-center">
      <nav aria-label="Page navigation example">
        <ul class="pagination">
          <li
            class="page-item"
            :class="['page-item',{disabled:currentPage===1}]"
            @click.prevent="setPage(currentPage-1)"
          >
            <a class="page-link" href="#"><</a>
          </li>
          <li
            v-for="page in totalPage"
            :key="page"
            class="page-item"
            :class="['page-item',{active:currentPage === page}]"
            @click.prevent="setPage(page)"
          >
            <a class="page-link" href="#">{{page}}</a>
          </li>
          <li
            class="page-item"
            :class="['page-item',{disabled:currentPage===totalPage}]"
            @click.prevent="setPage(currentPage+1)"
          >
            <a class="page-link" href="#">></a>
          </li>
        </ul>
      </nav>
    </div>
   <!--表格部分-->
   <table class="table table-hover">
      <thead class="thead-dark">
        <tr>
          <th scope="col">國家/區域</th>
          <th scope="col">類型</th>
          <th scope="col">天數</th>
          <th scope="col">備註</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(country,index) in filterRows.slice(pageStart, pageStart + offset)"
          :key="index.id"
        >
          <td>{{country.name}}</td>
          <td>{{country.Category.name}}</td>
          <td>{{country.days}}</td>
          <td>{{country.remark}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "DataWithPagination",
  props: {
    countries: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      query: "",
      currentPage: 1,
      offset: 20
    };
  },
  computed: {
    filterRows() {
      let query = this.query.toLowerCase();
      let originData = this.countries;
      if (!this.query.match(/^[ ]*$/)) {
        return originData.filter(d => {
          return d.name.toLowerCase().indexOf(query) > -1;
        });
      } else {
        return originData;
      }
    },
    pageStart() {
      return (this.currentPage - 1) * this.offset;
    },
    totalPage() {
      return Math.ceil(this.filterRows.length / this.offset);
    }
  },
  methods: {
    setPage(idx) {
      if (idx <= 0 || idx > this.totalPage) {
        return;
      }
      this.currentPage = idx;
    }
  },
  watch: {
    filterRows: {
      deep: true,
      handler: function() {
        this.currentPage = 1;
      }
    }
  }
};
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

// father.vue，將資料傳入

</div>

</template>

// children.vue

<div>

<li

class="page-item"

:class="['page-item',{disabled:currentPage===1}]"

@click.prevent="setPage(currentPage-1)"

</li>

<li

v-for="page in totalPage"

:key="page"

class="page-item"

:class="['page-item',{active:currentPage === page}]"

@click.prevent="setPage(page)"

</li>

<li

class="page-item"

:class="['page-item',{disabled:currentPage===totalPage}]"

@click.prevent="setPage(currentPage+1)"

</li>

</ul>

</nav>

</div>

<tr>

</tr>

</thead>

<tbody>

<tr

v-for="(country,index) in filterRows.slice(pageStart, pageStart + offset)"

:key="index.id"

<td>{{country.name}}</td>

<td>{{country.Category.name}}</td>

<td>{{country.days}}</td>

<td>{{country.remark}}</td>

</tr>

</tbody>

</table>

</div>

</template>

export default {

name: "DataWithPagination",

props: {

countries: {

type: Array,

required: true

}

data() {

return {

query: "",

currentPage: 1,

offset: 20

};

computed: {

filterRows() {

let query = this.query.toLowerCase();

let originData = this.countries;

if (!this.query.match(/^[ ]*$/)) {

return originData.filter(d => {

return d.name.toLowerCase().indexOf(query) > -1;

});

} else {

return originData;

}

pageStart() {

return (this.currentPage - 1) * this.offset;

totalPage() {

return Math.ceil(this.filterRows.length / this.offset);

}

methods: {

setPage(idx) {

if (idx <= 0 || idx > this.totalPage) {

return;

}

this.currentPage = idx;

}

watch: {

filterRows: {

deep: true,

handler: function() {

this.currentPage = 1;

}

};

</script>

參考資料

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.js 搭配 Docker 進行佈署

Docker 是個運用了虛擬化技術的套件，讓不

★全文分享★ [筆記] Vue-Carousel 輕量化輪撥套件介紹

說到 Carousel 輪撥系列的套件，Swiper 可以

★全文分享★ [筆記] 在 Vue 中正確引用 src/assets 裡的圖片

在 Vue 專案內放於 src/assets 裡面的圖片檔

★全文分享★ [筆記] 將 Vue 專案自動佈署到 Github Pages 上

每次完成了一個 Vue 專案，要佈署到 Github

★全文分享★ [筆記] Vue 如何監控視窗寬度，並讓每個 component 可以取用

Vue 的專案裡，若要監測使用者的視窗大小

★全文分享★ [指南] 在 Vue 專案中，修改樣式方法

樣式方法” title=”[指南] 在 Vue 專案中，修改樣式方法”>

在 Vue 專案中，若要修改對於 <body> 上

★全文分享★ [筆記] 從 Vue CLI 3 開始建立規模化專案

用 Vue CLI 3，可以快速的建立一個 Vue 專案

★全文分享★ [筆記] 運用 Moment.js 製作 AM / PM 時間外掛

運用 Vue 和 Moment.js 來將 input-time 的 12 小

★全文分享★ [筆記] CodeSandbox 線上編輯器模擬前端框架

隨著前端框架的發展，當需要多人編輯、

★全文分享★ [筆記] 工字型樣板，長方形依照比例縮放

這回要挑戰工字型( I-Shape )的顯示樣板。

★全文分享★ [筆記] Element-UI 的自定義表格邊框樣式

Element UI 的表格算是非常常用的模組化套

★全文分享★ [筆記] Vue 關於 slot-scope 的簡易認知

Vue 的 slot 系列使用方法，頭一回在 Element-

★全文分享★ [筆記] Vue Watch 監聽並延後發送請求

當使用 Vue Watch 的事件監聽時，若有要觸

★全文分享★ [筆記] Element UI Table 表格表頭縱向顯示

這回在從事公司專案時，遇上了一個稍嫌

★全文分享★ [筆記] Vue SCSS 使用 Deep Selectors

在 Vue Sass 的使用方法上，若你有和其他的

★全文分享★ [筆記] Vue 使用 SCSS

運用 Vue-cli 建立的專案，若要使用 SCSS 來

★全文分享★ [筆記] 自定義 Element UI 標題欄位遇上 Vue/no-unused error 的解決方法

在 Vue template 的檔案，有時會需要運用到 s

★全文分享★ [筆記] Vue 生命週期

每一個 Vue Instance 在創建時，都會經歷過

★全文分享★ [筆記] Vue 單元測試初探

隨著程式開發越來越龐大，那麼以「程式

★全文分享★ [筆記] Vue2 Perfect-Scrollbar 置底開始

Vue 的 Perfect-Scrollbar 套件，是 Vue 中滿常使

★全文分享★ [筆記] Vue 的狀態管理 Vuex 實作心得

Vuex 是 Vue 中用於狀態管理的工具，你可以

★全文分享★ [筆記] Vue 自訂綁定 style 標籤

Vue 中的 v-bind 有一些預設的 style 選項如 :d

★全文分享★ [筆記] Body-Parser 無法解析的 FormData 解決方案 – multer

運用 express 的框架來架設後端的 Node.js 伺

★全文分享★ [筆記] Vue 頁面元件定時自動跳轉

當 Vue 頁面需要定時自動跳轉的功能時，

★全文分享★ [筆記] Vue 刷新當前頁面

Vue 的使用上，若是要進行完某個操作後重

★全文分享★ [全端開發] 打造一個公開聊天室 Vue.js+MySQL+Socket.io+passport-jwt

這回實際演練來打造一個即時聊天室來練

★全文分享★ [筆記] BootstrapVue Pagination Vue 分頁套件使用

在網路世界中常用的前端 css 套件 – Bootstra

★全文分享★ [筆記] Vue 避免 ESLint 的 Unexpected Console Statement

當運用官方套件迅速建立一個 Vue 專案後

★全文分享★ [筆記] Vue-cli 輸出 console.log 的結果

使用 Vue-cli 輸出頁面結果到網頁上時，若

★全文分享★ [筆記] 解決 Vue-cli 打包後，無法顯示 Favicon 的問題

Vue-cli 運用 npm run build 將專案打包成靜態

★全文分享★ [筆記] 全端開發本機端資料互通 Vue.config.js 設定

在本機端執行前後端(全端)共同開發時，

★全文分享★ [筆記] 解決 Vue 專案的 localhost:8080/sockjs-node 的無效請求

這篇是解決不時在測試 Vue 專案上時，常

★全文分享★ [筆記] Vue.js & Node.js 專案初始化筆記

這篇主要是筆記下如何快速的在本機端生

按讚加入粉絲團

實作需求

常見問題

1. computed 與 method 的區別？

2. props 的資料無法修改？

3. watch 的意義？

程式碼展示

參考資料

其他 Vue.js 相關文章

★全文分享★ [筆記] Vue 按鈕 / 篩選資料架構

★全文分享★ [指南] Vue.js 搭配 Docker 進行佈署

★全文分享★ [筆記] Vue-Carousel 輕量化輪撥套件介紹

★全文分享★ [筆記] 在 Vue 中正確引用 src/assets 裡的圖片

★全文分享★ [筆記] 將 Vue 專案自動佈署到 Github Pages 上

★全文分享★ [筆記] Vue 如何監控視窗寬度，並讓每個 component 可以取用

★全文分享★ [指南] 在 Vue 專案中，修改 樣式方法

★全文分享★ [筆記] 從 Vue CLI 3 開始建立規模化專案

★全文分享★ [筆記] 運用 Moment.js 製作 AM / PM 時間外掛

★全文分享★ [筆記] CodeSandbox 線上編輯器 模擬前端框架

★全文分享★ [筆記] 工字型樣板，長方形依照比例縮放

★全文分享★ [筆記] Element-UI 的自定義表格邊框樣式

★全文分享★ [筆記] Vue 關於 slot-scope 的簡易認知

★全文分享★ [筆記] Vue Watch 監聽並延後發送請求

★全文分享★ [筆記] Element UI Table 表格表頭縱向顯示

★全文分享★ [筆記] Vue SCSS 使用 Deep Selectors

★全文分享★ [筆記] Vue 使用 SCSS

★全文分享★ [筆記] 自定義 Element UI 標題欄位遇上 Vue/no-unused error 的解決方法

★全文分享★ [筆記] Vue 生命週期

★全文分享★ [筆記] Vue 單元測試初探

★全文分享★ [筆記] Vue2 Perfect-Scrollbar 置底開始

★全文分享★ [筆記] Vue 的狀態管理 Vuex 實作心得

★全文分享★ [筆記] Vue 自訂綁定 style 標籤

★全文分享★ [筆記] Body-Parser 無法解析的 FormData 解決方案 – multer

★全文分享★ [筆記] Vue 頁面元件定時自動跳轉

★全文分享★ [筆記] Vue 刷新當前頁面

★全文分享★ [全端開發] 打造一個公開聊天室 Vue.js+MySQL+Socket.io+passport-jwt

★全文分享★ [筆記] BootstrapVue Pagination Vue 分頁套件使用

★全文分享★ [筆記] Vue 避免 ESLint 的 Unexpected Console Statement

★全文分享★ [筆記] Vue-cli 輸出 console.log 的結果

★全文分享★ [筆記] 解決 Vue-cli 打包後，無法顯示 Favicon 的問題

★全文分享★ [筆記] 全端開發本機端資料互通 Vue.config.js 設定

★全文分享★ [筆記] 解決 Vue 專案的 localhost:8080/sockjs-node 的無效請求

★全文分享★ [筆記] Vue.js & Node.js 專案初始化筆記

延伸閱讀

★全文分享★ [指南] 在 Vue 專案中，修改樣式方法

★全文分享★ [筆記] CodeSandbox 線上編輯器模擬前端框架

★全文分享★ [筆記] Vue 避免 ESLint 的 Unexpected Console Statement