转：

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 Global Round 7 A. Bad Ugly Numbers（数学）

    题意: 给你一个 n,输出一个 n 位不含 0 且不被任一位整除的正数. 思路: 构造 233 或 899. #include <bits/stdc++.h> using namespac ...

  2. hdu5501 The Highest Mark

    Problem Description The SDOI in 2045 is far from what it was been 30 years ago. Each competition has ...

  3. poj3260 The Fewest Coins

    Description Farmer John has gone to town to buy some farm supplies. Being a very efficient man, he a ...

  4. 流程的python PDF高清版

    免费下载链接:https://pan.baidu.com/s/1qcPjLlFXhVXosIGBKHVVXQ 提取码:qfiz

  5. 基于CentOS-7的redis下载和安装

    1.下载和安装 在我安装的虚拟机中,我把所有自己安装的软件都放在了/ph/install 目录下,具体以自己实际情况为准. [root@localhost ~]$ cd /ph/install #进入 ...

  6. cin 与 getline

    cin空格截断 getline(cin,s) 换行结束 ....太愚蠢了

  7. oslab oranges 一个操作系统的实现 实验一

    实验目的: 搭建基本实验环境,熟悉基本开发与调试工具 对应章节:第一.二章 实验内容: 1.认真阅读章节资料 2.在实验机上安装virtualbox,并安装ubuntu 3.安装ubuntu开发环境, ...

  8. codeforces 9D（非原创）

    D. How many trees? time limit per test 1 second memory limit per test 64 megabytes input standard in ...

  9. fibonacci all in one

    fibonacci all in one fibonacci sequence https://www.mathsisfun.com/numbers/fibonacci-sequence.html f ...

  10. dragable tabs & iframe & new window

    dragable tabs & iframe & new window https://www.npmjs.com/package/react-draggable-tab demo h ...