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


Posted in Javascript onNovember 13, 2020

今天遇到一个小问题平时没留意,el-pagination这个分页组件有一个属性是current-page当前页。

今天想在methods里面手动修改他绑定的变量从而达到修改页码的效果,结果发现分页组件视图并没有渲染,还是停留在原本的页码处。

然后想了想,想起了.sync这个语法糖,让数据进行双向绑定。

直接上修改的代码看看

<el-pagination
  :current-page.sync="currentPage"
  :page-sizes="[10, 30, 50]"
  :page-size="pageSize"
  :total="total"
  layout="total, sizes, prev, pager, next, jumper"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
/>
refresh () {
 this.handleCurrentChange(1)
 this.currentPage = 1
}

具体原因我想了一下,可能是因为修改this.currentPage,分页组件没办法通知父组件视图更新,所以添加了.sync修饰符使得子组件能和父组件进行沟通,从而实现双向绑定,父组件获取到更新后的值重新渲染页面。

element-ui 接口返回有数据但是视图没有更新

前言:一般情况下,接口有数据返回,但相应的视图不更新,只会有两种情况:
1.在这个数据要更新之前有报错或者有不严谨的判断。
2.vue 对象、数组不能深层监听。

一、排查有无不严谨的判断和报错。

二、vue 对象不允许在已创建的的实例上动态添加新的根级响应式属性 。(参考vue官网)
如果非要这么做的话,我们可以使用 this.$set()。

this.$set() 可以接收三个参数 1. 要绑字的数据。 2. 要添加或修改的属性名称。 3. 要赋的值

this.$set(this.projectList, 'projectName', 'chenxuemin')

三、手动更新视图

它可以影响到本实例及本实中的 slot 插槽内容

this.$forceUpdate() // vm.$forceUpdate()

到此这篇关于详解vue修改elementUI的分页组件视图没更新问题的文章就介绍到这了,更多相关vue element分页组件视图内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
DHTML Slide Show script图片轮换
Mar 03 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
javascript实现的简单计时器
Jul 19 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
Vue filter介绍及其使用详解
Oct 21 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
JS实现轮播图效果
Jan 11 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 #Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 #Javascript
Vue 3.0中jsx语法的使用
Nov 13 #Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 #Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 #Javascript
PHP 502bad gateway原因及解决方案
Nov 13 #Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 #Javascript
You might like
wordpress之wp-settings.php
2007/08/17 PHP
php与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
Javascript计算时间差的函数分享
2011/07/04 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
JavaScript中this详解
2015/09/01 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python实现的数据结构与算法之链表详解
2015/04/22 Python
python图像处理之反色实现方法
2015/05/30 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
骨干教师考核方案
2014/05/09 职场文书
企业文化学习心得体会
2016/01/21 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript