转：

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. Codeforces Round #664 (Div. 2) D. Boboniu Chats with Du

    传送门:cf1395D 题意 给定一个长度为n的数组a[i]为当天说话的有趣值,如果a[i]>m,那么在 i 之后有d天不能说话.否则可以每天都说话.找到一个排列使得n天有趣值总和最大,问有趣值 ...

  2. codeforces B. Pasha and String

    Pasha got a very beautiful string s for his birthday, the string consists of lowercase Latin letters ...

  3. c语言实现--不带头结点的单链表操作

    1,不带头结点的单链表操作中,除了InitList(),GetElem(),ListInsert(),ListDelete()操作与带头结点的单链表有差别外,其它的操作基本上一样. 2,不带头结点单链 ...

  4. Codeforces Round #649 (Div. 2)

    Codeforces Round #649 (Div. 2) -- WKL \(\mathcal{A}\)题: \(\mathrm{XXXXX}\) Greedy implementation *12 ...

  5. PowerShell随笔4---变量

    全局变量 输入$global:后按ctrl+space,我们就可以看到所有的全局变量. 比如我们可以查看PowerShell的版本: 我们可以在在编写脚本代码的时候使用这些变量,globle可以省略, ...

  6. ElasticSearch 搜索引擎概念简介

    公号:码农充电站pro 主页:https://codeshellme.github.io 1,倒排索引 倒排索引是一种数据结构,经常用在搜索引擎的实现中,用于快速找到某个单词所在的文档. 倒排索引会记 ...

  7. kubernetes实战-交付dubbo服务到k8s集群（六）使用blue ocean流水线构建dubbo-consumer服务

    我们这里的dubbo-consumer是dubbo-demo-service的消费者: 我们之前已经在jenkins配置好了流水线,只需要填写参数就行了. 由于dubbo-consumer用的gite ...

  8. leetcode15 三数之和 双指针

    注意题目没要求数字只能用一次 a + b + c = 0 即为 -b=a+c,同时要求数字不全为正(然后发现a+b+c就行...不过多想想没坏处嘛) 先处理特殊情况,然后 先排序 注意不重复,只需要有 ...

  9. Leetcode（337）-打家劫舍III

    小偷又发现一个新的可行窃的地点. 这个地区只有一个入口,称为"根". 除了根部之外,每栋房子有且只有一个父房子. 一番侦察之后,聪明的小偷意识到"这个地方的所有房屋形成了 ...

  10. mybatis(二)全局配置mybatis-config.xml

    转载:https://www.cnblogs.com/wuzhenzhao/p/11092526.html 大部分时候,我们都是在Spring 里面去集成MyBatis.因为Spring 对MyBat ...