转：

vue修改elementUI的分页组件视图没更新问题

今天遇到一个小问题平时没留意，el-pagination这个分页组件有一个属性是current-page当前页。
今天想在methods里面手动修改他绑定的变量从而达到修改页码的效果，结果发现分页组件视图并没有渲染，还是停留在原本的页码处。
然后想了想，想起了.sync这个语法糖，让数据进行双向绑定。

直接上修改的代码看看

refresh () {

  this.handleCurrentChange(1)

  this.currentPage = 1

}

具体原因我想了一下，可能是因为修改this.currentPage，分页组件没办法通知父组件视图更新，所以添加了.sync修饰符使得子组件能和父组件进行沟通，从而实现双向绑定，父组件获取到更新后的值重新渲染页面。
（我理解不是很通透，大概推测，有错可以在评论指出，虚心请教ing~）

转：

vue修改elementUI的分页组件视图没更新问题

vue修改elementUI的分页组件视图没更新问题的更多相关文章

  1. Vue+element UI实现分页组件

    介绍 这是一个是基于element-UI的分页组件基础上,进行了二次封装的分页组件,在展示数据时,该分页组件采用了每显示一页数据,只请求当前页面的数据的请求策略,从而避免了一次性将数据全部请求所造成的 ...

  2. 基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...

  3. Vue.js的表格分页组件

    转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...

  4. Vue 2.0 pagination分页组件

    最近写了一个分页组件,效果如下图: f-pagination.js文件 Vue.component('f-pagination',{ template:'<div class="fPa ...

  5. 基于Vue的简单通用分页组件

    分页组件是每一个系统里必不可少的一个组件,分页组件分为两部分.第一部分是模版部分,用于显示当前分页组件的状态,例如正在获取数据.没有数据.没有下一页等等:第二部分是分页数据对象,用于封装一个分页组件的 ...

  6. vue 数据改变但是视图没更新

    在使用过程中会出现数据改变但是视图没有更新的情况(类型数组或者对象),这里我们就需要用到 $set 如果是对象类型: this.$set(this.userInfo, 'name', 'gionlee ...

  7. vue 数组push元素 视图没更新

    Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 问题描 ...

  8. vue+node+elementUI实现分页功能

    第1===>收集当前页码 和 每页显示条数 第2==>发送ajax请求页码 和 每页显示条数发送给后端 第3===>接收后端返回的数据总条数 total 和 当前页码的数据 data ...

  9. elementui+vue修改elementUi默认样式不生效

    重写,覆盖都不行, ! important  也不行. 原因是 在style标签加了 scoped 的原因.

随机推荐

  1. 1151 LCA in a Binary Tree

    The lowest common ancestor (LCA) of two nodes U and V in a tree is the deepest node that has both U ...

  2. Codeforces Round #650 (Div. 3) A. Short Substrings

    题目链接:https://codeforces.com/contest/1367/problem/A 题意 给出一个字符串 $t$,找出原字符串 $s$,$t$ 由 $s$ 从左至右的所有长为 $2$ ...

  3. tesseract-ocr的安装及使用pycharm来运行

    1.可以在:http://digi.bib.uni-mannheim.de/tesseract/tesseract-ocr-setup-4.00.00dev.exe 下载一个exe文件,然后直接按照提 ...

  4. CodeForces - 1250J The Parade 二分

    题目 题意: 一共n种身高,每一个士兵有一个身高.你需要把他们安排成k行(士兵不需要全部安排),每一行士兵身高差距小于等于1.你要找出来最多能安排多少士兵 题解: 这道题很容易就能看出来就是一道二分, ...

  5. Java基础（第一期）

    Java基础 1.注释 Java中注释有三种: 单行注释 // 多行注释 /* */ 文本注释(用的较少) /** */ 书写注释是一个非常好的习惯 BAT 平时写代码一定要注意规范 //有趣的代码注 ...

  6. C#Assembly、程序集、装配件、命名空间以及类型的关系

    Assembly = 程序集 = 装配件 命名空间是类的逻辑组织形式,程序集是类的物理组织形式. 程序集其实和命名空间没有什么必然的联系. 程序集1: namespace1{ public class ...

  7. .NET 5学习笔记（10）——Entity Framework Core之切换SQLServer和SQLite

    上一篇我们梳理了CodeFist的一般流程,本篇我们讨论如何在一套代码中,支持SQL Server和SQLite的切换.同时从本篇开始,我们从.NET Core 3.1 迁移到.NET 5.相信.NE ...

  8. Zabbix 监控网站

    官网教学步骤 配置 Web 监控 创建 Web 场景 配置 Web 场景 配置 Web 监控步骤 一共划分为 5 个步骤: 监测访问登录页面 模拟登录功能 # sid 变量的值 regex:name= ...

  9. K8S(04)核心插件-coredns服务

    K8S核心插件-coredns服务 目录 K8S核心插件-coredns服务 1 coredns用途 1.1 为什么需要服务发现 2 coredns的部署 2.1 获取coredns的docker镜像 ...

  10. 3.Work Queues

    标题 : 3.Work Queues 目录 : RabbitMQ 序号 : 3 var channel1 = _connection.CreateModel(); channel1.BasicQos( ...