[笔记] 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 相关文章

★全文分享★  [笔记] 运用 Moment.js 制作 AM / PM 时间外挂
[笔记] 运用 Moment.js 制作 AM / PM 时间外挂
运用 Vue 和 Moment.js 来将 input-time 的 12 小时制时间,转换成 24 小时制传送到后端。运用套件和方法1. Vue-router:跳转到展示 Demo 页面2. Vue 的 v-model:双向绑定后,可以在 component 内即时处理3. Vue 的 wat
★全文分享★  [笔记] 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浏览人气:225