转：

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. 2020牛客暑期多校训练营（第八场）Game SET

    传送门:Game SET 题意 一套牌有四种属性,每种属性都有三种特征,shapes (one, two, or three), shape (diamond, squiggle, or oval), ...

  2. Luogu T14448 区间开方

    题面版权来自Shlw.题目链接 题目背景 无 题目描述 给定一个数列,元素均为正整数,对其以下两种操作: 1.将某区间每一个数变为其算术平方根(取整) 2.求出某区间内所有数的最大值 输入输出格式 输 ...

  3. Codeforces Round #647 (Div. 2) B. Johnny and His Hobbies（枚举）

    题目链接:https://codeforces.com/contest/1362/problem/B 题意 有一个大小及元素值均不超过 $1024$ 的正整数集合,求最小正整数 $k$,使得集合中的每 ...

  4. B、小花梨的三角形(解题报告)

    通过set进行标记(思想很简单,实现起来有点容易错)set(红黑树:效率高) 思路: 对行列和长度进行枚举: 对三个顶点进行排序 储存顶点后计数输出 #include<iostream> ...

  5. Codeforces Round #547 (Div. 3) E. Superhero Battle (数学)

    题意:有一个HP为\(h\)的大怪兽,你需要轮流进行\(i\)次操作.每次可以使\(h+=d_i\)(\(d_i\)有正有负),当第\(n\)次操作完成后,再从第一次开始,问能否使得怪兽的HP变为\( ...

  6. Codeforces Round #171 (Div. 2) B. Books (模拟队列)

    题意:有一组数,问子数组和最大不超过\(t\)的最多元素个数. 题解:用数组模拟队列,不断的往里面放,队列中的元素之和大于\(t\),就不断地从队头弹出直到满足条件,维护一个最大值即可. 代码: in ...

  7. Codeforces Round #649 (Div. 2) C. Ehab and Prefix MEXs (构造,贪心)

    题意:有长度为\(n\)的数组\(a\),要求构造一个相同长度的数组\(b\),使得\({b_{1},b_{2},....b_{i}}\)集合中没有出现过的最小的数是\(a_{i}\). 题解:完全可 ...

  8. java调用http接口的几种方式总结

    本文参考: https://blog.csdn.net/fightingXia/article/details/71775516 https://www.cnblogs.com/jeffen/p/69 ...

  9. dict与set -- Python

    dict(字典):用空间换取时间,占据空间大,但查询速度快,键值对(key:value),key唯一 d = {'Michael': 95, 'Bob': 75, 'Tracy': 85} 由于一个k ...

  10. WOJ1022 Competition of Programming 贪心 WOJ1023 Division dp

    title: WOJ1022 Competition of Programming 贪心 date: 2020-03-19 13:43:00 categories: acm tags: [acm,wo ...