基於具有唯一值的數組創建多個動態選擇過濾器，以過濾Vue.js中的另一個數組

Question

我目前是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數組進行通信，如果我可以進入那個階段，那么我要做的就是復制那個用於其他過濾器。

我將不勝感激，並且樂於提供更多細節。

Answer 1

您的代碼存在一些問題：

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>

2. 您在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