# 关于vue数据筛选遇到的坑
今天在修改博客首页分类的时候,需要对从服务器获取的数据进行筛选
首先情况是这样的:==**数据是从服务器获取,然后遍历在Home页,在点击分类的时候对数据进行筛**选==
大致的代码是这样的
<div v-for="x in list">
<li v-for="y in (x.detail)">
<a @click="screen(y.id)">{{y.id}}</a>
</li>
</div>
//数据信息
list:[]
//请求
this.axios
.get("请求地址")
.then(function(res) {
//获取数据
this.list = res.data
}
});
需求是需要用过a标签的点击事件去筛选 list列表
通常我们会直接用filter来筛选数据
==我的思路是你请求返回的全量数据,不要用methods去做过滤,当数据过来的时候就你现在直接在这个数组上push数据了。如果用methods去做过滤会存在替换掉原数组,这样过滤数组的话会越来越少,所以你可以用一个computed属性,然后在模板中使用这个计算属性:==
在这里我遇到一个坑的我很惨的问题就是:
computed中定义的定义的名字需要和你循环的数组名称一样,但是我又在data中定义了相同的名字一直没办法处理
这就是图片中三个名字重复了,vue会报错说你再数据组定义了相同的名称
处理方法就是:将循环中的名字更改掉,data中的不变,在computed中做判断如果筛选条件为空的时候,返回原数组当有判定条件的时候再执行筛选
computed: {
// //筛选
listCmputed: function(index) {
if (判断筛选条件是否存在) {
return this.articles.filter(data => {
//讲处理的结果替换掉原数组
return data.label == this.list;
});
}
return this.articles;
}
},
下面你就可以在methods中传值接受筛选的条件了
在这里你可以用什么方法都可以input...啊什么的 只要能让computed中接收到你的筛选条件就行
下一片文章我会继续讲关于筛选的集中方法