关于vue数据筛选遇到的坑（使用filter）

• Z时代
• 2024-01-10
• 分类：综合

# 关于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中接收到你的筛选条件就行

下一片文章我会继续讲关于筛选的集中方法

以上是 关于vue数据筛选遇到的坑（使用filter） 的全部内容， 来源链接： utcz.com/z/374819.html