vue.js关于关于双向数据绑定的问题

坏蛋jiu
  • 40

我有一个输入框,输入内容value1后搜索出来数据,数据的分页是后台做的,我每次翻页的时候都需要将页码传给后台,重新获取数据。
这样带来了一个问题,假如说我输入框内的内容变为value2了,但是没有点搜索按钮,也就是说我有的数据是基于前一个value1的,但是点翻页后数据是基于value2的。
这样的情况有办法解决吗?

回复
阅读 1k
6 个回答
✓ 已被采纳

可以另外定义一个变量currentValue,初始为空。假设双向绑定的值为bindValue。
点击页码请求时,判断currentValue是否为空,如果为空,则请求参数为双向绑定的值bindValue,如果不为空,则请求参数为currentValue。
点击搜索时,获取双向绑定的值bindValue,赋给currentValue

clipboard.png

这个方法跟你的描述的一样,把第一页第二页的数组连接起来,搜索的就是全部的了

直白一点 而且看产品需求 业务逻辑

如果value 值改变了 页码需不需要归为1的状态 然后拉取第一页的满足value值的数据
确认一下你的需求 然后在说方案

看跑题了
很简单,多声明一个变量a 然后每次搜索的时候把文本框的值 赋值与这个变量a

然后请求已这个变量a为参数请求

我担心我审题不清楚。所以列出两种情况
1、 你点击了下一页,展示的数据还是基于value1 的。其实可以在data中初始化一个falg,初始值是false,点击search的时候置为true。发请求时,判断flag,false用之前的值 valuePrev 为true用value,并把value赋值给valuePrev,请求成功后再把flag置为false。这样就不会出现点击下一页上一页时传向后台的数据是双向绑定的数据了

2、点击下一页就是用最新的value2,那就没什么问题了,直接发送就好了

我是这么理解你的需求的。
点击搜索按钮,向后台请求第一页的搜索数据,发送参数value
翻页的时候,向后台请求第X页的搜索数据,发送参数value和page

那么在更改value的时候不应当触发搜索动作,直到点击查询按钮
在翻页的时候会触发搜索,发送currentValue和page,就会导致搜索出来的数据页数偏差

那么在翻页触发的搜索动作上,先保存一份oldValue,不点击搜索,不取控件中的value

梳理一下思路:

搜索按钮:取value,searchValue = value
翻页按钮:取searchValue+page

职责分的细点搞就好了

  • 查询按钮负责重置查询参数(含页码)。
  • 翻页按钮负责只修改页码参数。
  • 这两个操作都接一个请求操作。
你知道吗?

宣传栏