基于具有唯一值的数组创建多个动态选择过滤器以过滤 Vue.js 中的另一个数组

Posted 2023-02-23

【中文标题】基于具有唯一值的数组创建多个动态选择过滤器以过滤 Vue.js 中的另一个数组

【英文标题】：Create multiple dynamic select filters based on an array with unique values to filter another array in Vue.js

【发布时间】：2019-12-22 23:05:43

【问题描述】：

我目前是 Vue.js 的新手，这是我在堆栈上的第一个问题，如果我不是最清楚的，请原谅我。

我正在尝试创建多个动态选择过滤器来过滤我使用 axios 从 api 获得的列表。

我已经在我的 html 模板中显示了数据并设法创建了两个过滤器，我的主要问题是我需要过滤器只显示唯一值（没有重复），这就是我苦苦挣扎的地方。

这主要是工作的概念证明，它显示一组用户名、标签和位置。我们以前在哪里使用 angularjs，现在正在寻求转移到 Vue.js，所以我还没有掌握它，目前很难过，因为我不明白如何使来自一个源数据数组的信息过滤另一个源数据数组。

这是我目前在 app.js 中的内容

new Vue(
        el: "#vueApp",        
        data: 
            users: [],
            JobRole: '',
            Label: '',
            search: '',
            JobRoles: [],
        ,
        created: function() 
            this.getResults();
        ,


        methods: 
            getResults: function() 
                var vm = this;
                axios.get("APIData").then(function(response) 
                    console.log(response.data.value);
                    vm.users = response.data.value;
                )
            ,

            filterPosition:function() 
                var vm = this;
                vm.item.Position = event.target.value;
            ,

            filterLabel:function() 
                var vm = this;
                vm.item.Meta.Label = event.target.value;
            

        ,

        computed: 

            JobRoleList: function()
                var vm = this;
                var JobRoles = [];
                vm.users.forEach(function(item)
                    if(!JobRoles.includes(item.Position))
                        JobRoles.push(item.Position);  
                        console.log(JobRoles);                          
                    

                );

                return JobRoles;

            ,

                filterAll: function()
                    var vm = this;
                    var filtered = vm.users;
                    // var JobRoles = vm.JobRoles;

                    if (vm.search) 
                        filtered = vm.users.filter(function(item)
                            return item.People.Title.indexOf(vm.search) > -1
                        );
                    

                    if (vm.Label) 
                        filtered = filtered.filter(function(item)
                            return item.Meta.Label.match(vm.Label)
                        );
                    

                    if (vm.JobRole) 
                        vm.JobRole = filtered.filter(function(item)
                            return item.Position.match(vm.JobRole)
                            console.log(JobRole);
                        );
                    

                    return filtered
                    console.log(filtered);
                ,






);

这是我的标记

<div id="vueApp">
    <div>
        <select v-model="JobRole">
            <option value="">Select a Position</option>
            <option v-for="item in JobRoleList" :value="item.Position">item</option>
        </select>

        <select v-model="Label">
            <option value="">Select a Label</option>
            <option v-for="item in filterAll" :value="item.Meta.Label">item.Meta.Label</option>
        </select>

        <input type="text" v-model="search" placeholder="Search...">

        <table>
            <tr>
                <th>Name</th>
                <th>Department</th>
                <th>Position</th>
                <!-- <th>People Title</th> -->
            </tr>
            <tr v-for="item in filterAll">
                <td>item.People.Title</td>
                <td>item.Meta.Label</td>
                <td>item.Position</td>

            </tr>
        </table>
    </div>
</div>

所以我想要做的是让每个过滤器都有唯一的值，没有重复，并过滤列表中的信息。

我已经设法为 JobRoleList 下的一个选择过滤器创建了一个唯一值数组，我只需要知道如何让它与 filterAll 数组通信，如果我能到达那个阶段，那么我需要做的就是为另一个过滤器复制它。

我将不胜感激，并非常乐意提供更多详细信息。

【问题讨论】：

您能否提供数据示例？此外，还不清楚您要完成什么 - 您已经在 filterAll 计算属性中通过搜索文本和工作角色和标签进行过滤 - 有什么问题？

对不起，我没有说清楚，我想要完成的是使用来自 api 的数据创建两个选择选项，我能够在选择中显示数据，但它还显示重复项，我希望选择选项显示唯一值并让它们的值过滤表中显示的数据。我创建了一个名为 JobRoleList 的函数，它可以完成我想要的并且只显示位置的唯一值。我的问题是，我无法让它过滤 filterAll 数据。

【参考方案1】：

您的代码存在一些问题：

您将错误的值绑定到工作角色选择。现在，当 JobRoleList 变量是字符串数组时，您的代码会显示 :value="item.Position"。因此，当您单击选择时，JobRole 将没有值

        <select v-model="JobRole">
            <option value="">Select a Position</option>
            <option v-for="item in JobRoleList" :value="item.Position">item</option>
        </select>

您在jobRole 部分的filterAll 计算变量中过滤了错误的变量

    if (vm.JobRole) 
        vm.JobRole = filtered.filter(function(item)
            return item.Position.match(vm.JobRole)
            console.log(JobRole);
        );
        // This should say "filtered =" not "vm.JobRole ="
    

还有一种更简洁的方法可以使用 ES6 获取唯一的值列表：

    JobRoleList: function( users ) 
      return [...new Set(users.map(d => d.Position))];
    

您还可以在匹配之前将搜索全部小写字母以改善用户体验。

        filtered = users.filter(function(item)
          return item.People.Title.toLowerCase().indexOf(search.toLowerCase()) > -1
        );

我制作了一个带有工作演示的 codepen：https://codepen.io/CodingDeer/pen/abomBXP

【讨论】：

嗨，Cathy，非常感谢你，这是一个真正的帮助，我真的很感激。