vue js模糊搜索11

我要对后端接口中的数据进行模糊搜索,参数没有姓名这个字段,所以我只能自己手动做一个搜索功能
现在有一个问题,搜索功能已经实现,但是有bug,搜索正确的时候,没有问题,但是只要搜索完错误的,这个数据就清空了,然后再次进行搜索的时候,什么也搜不到。这种情况有没有好一点的解决办法,我想不管是搜索什么,再次搜索的时候数据还是接口传过来的

img

img

img

img

原因是这样的:因为你进行一次错误搜索,this.dataList就设置为空的了,而你的this.tableList = this.dataList,所以你下次再进行搜索的时候,是从一个空的数组中进行filter。(你可以在每次搜索之前,console.log(this.tableList)查看一下)。
解决方案:在data当中再设置一个this.finalDataList 用来存放从后端获取的原始数据数组,并且不要修改这个。然后每次搜索都从这个this.finalDataList中进行filter.

this.tableList = this.dataList;
this.cname = this.inputValue1;
setTimeout(() => {
  this.dataList = this.finalDataList.filter(res => res.respemp.includes(this.cname));
}, 500)

你备份一份 数据 ,不改这个数据 。每次搜索前 都 重新 赋值 。