Element-ui中的分页(pagination)组件的current-page属性不同步更新视图的坑

Element-ui中的分页(pagination)组件的current-page属性不同步更新视图的坑

1. 这个坑出现的位置

之前在写一个页面的时候用到了Element-ui的pagination分页组件,当时要做的效果是随着页码的改变,页面会发送对应页码的请求来获取对应的数据,下面是我当时所写的代码:

code
这是data中的数据:

在这里插入图片描述
注意:这个问题就在这个时候出现了;
这个时候当我想要通过点击分页组件的页码按钮,改变当前页,重新发送请求的时候发现,页码是改变了,但是并没有发送对应页面的请求。。。

wtf

2. 问题出现的原因和解决方法

后来我翻了翻资料发现这里有一个坑,咱们先来看看官方文档的说明:
在这里插入图片描述
官方文档中说明 current-page 绑定一个 number 类型的值,那么现在就知道为什么我按完页码按钮后不能够发送请求了:

在这里插入图片描述
当时我为了偷懒少写几个变量,于是就直接将对象的属性赋值给了current-page属性,然后导致出现了这个问题;

原因:原来Element-ui分页组件的current-page属性只能绑定基础数类型的变量,不能够绑定以对象形式表示的变量,因为这个属性没有办法监听到对象内部的具体某个属性的变化。

解决方法:
既然current-page属性没有办法绑定对象形式的变量,那么使用各中间变量接收对象内部的属性值,让这个中间变量与对象内部属性值保持同步,再把这个中间变量赋值给curren-page属性就可以解决这个问题了:

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43852569/article/details/119959879
今日推荐