[笔记] 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浏览人气:15