如何添加“排序依据”下拉列表以在 Vuejs 中对列表进行排序？

Question

我有一个非常简单的设置。

尝试在顶部显示带有搜索框的用户列表（用于主动过滤搜索结果）。

如果我使用 页面可以正常工作并显示。

我正在尝试添加一个额外的下拉列表来选择要排序的属性（并希望在我让第一个下拉列表正常工作后添加另一个下拉列表以指示升序/降序）。

我当前的代码（带有非工作版本的排序）如下所示：

    <div id="app">
        <section class="mb-3">
            <div class="container">
                <h2>Person Search</h2>
                <h3>
                    <small class="text-muted">Filter people based on the name, location or job</small>
                </h3>
                <h3>
                    <small class="text-muted">
                        Examples: “Jane Doe”, “ABC Building”, or “Math”
                    </small>
                </h3>
                <input type="text" class="form-control" v-model="search_term" placeholder="Begin typing to filter by name, location or job...">
                <!-- THIS WOULD CAUSE THE LIST TO FILTER ALPHABETICALLY BY SELECTED ATTRIBUTE -->
                <select id="sortFilterSelect" name="sort_filter" v-model="sort_filter">
                    <option value="">Sort By...</option>
                    <option value="first_name">First Name</option>
                    <option value="last_name">Last Name</option>
                </select>
            </div>
        </section>
        <section>
            <div class="container">
                <h3>People List : ([[ people_count ]] People)</h3>
                <!-- I ADDED 'sortedPeople' HERE - WHICH BROKE IT -->
                <div v-for="person in filteredPeople | sortedPeople">
                    <div class="card mb-4" :class="person.has_summative_past_due ? 'alert-warning' : ''">
                        <div class="card-body row" >
                            <div class="col">
                                <h4 class="card-title" v-bind:person='person.full_name'><a v-bind:href="'{% url 'commonground:index' %}' + 'users/' + person.id">[[ person.full_name ]]</a></h4>
                                <p v-if="person.active_summative" class="card-text">
                                    Active Summative Due Date: [[ person.active_summative.due_date ]]
                                    <span v-show="!person.active_summative.past_due" v-bind:past_due='person.active_summative.past_due' class="badge badge-success">[[ person.active_summative.due_date_status ]]</span>
                                    <span v-show="person.active_summative.past_due" class="badge badge-danger">[[ person.active_summative.due_date_status ]]</span>
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item justify-content-between align-items-center" v-for="summary in person.summative_evaluations_summary">
                                            <span class="badge badge-secondary badge-pill">[[summary.evaluation_type__count]]</span> [[ summary.evaluation_type__name ]]
                                        </li>
                                    </ul>
                                </p>
                                <p v-if="!person.active_summative" class="card-text">
                                    No Active Unlocked Summatives
                                </p>
                                <a v-if="person.active_summative" :href="person.active_summative.absolute_url" class="btn btn-primary"><i class="far fa-edit"></i> View / Edit Active Summative</a>
                            </div>
                            <div class="col-auto float-right text-right">
                                <p class="h5">
                                    [[ person.base_location ]]
                                    <div v-if="person.multiple_locations" class="small text-muted"><i class="fal fa-info-circle"></i> User has multiple locations</div>
                                </p>
                                <p class="h5">
                                    [[ person.assignment_job ]]
                                    <div v-if="person.multiple_jobs" class="small text-muted"> <i class="fal fa-info-circle"></i> User has multiple jobs</div>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    <!-- END OF VUE -->
    </div>

实际的 Vue 代码如下所示：

    <script>
        const app = new Vue({
            delimiters: ['[[', ']]'],
            el: '#app',
            data: {
                people: [],
                people_count: 0,
                search_term: "",
                sort_filter: "",
            },
            computed: {
                filteredPeople:function()
                {
                    var search = this.search_term.toLowerCase();
                    return this.people.filter(function(person){
                        return Object.values(person).some( val => String(val).toLowerCase().includes(search))
                    })
                },
                sortedPeople:function()
                {
                    var sort_filter = this.sort_filter.toLowerCase();
                    console.log('triggered')
                    return this.people.filter(function(person){
                        return Object.values(person).some( val => String(val).toLowerCase().includes(sort_filter))
                    })
                },
            },
            async created () {
                var response = await fetch("{% url 'user-list' %}");
                this.people = await response.json();
                this.people_count = await this.people.length
            }
        })
    </script>

对 Vue 相当陌生，但我正在构建它来学习。感谢所有帮助！

Answer 1

查看我制作的简单示例：Link

    filteredPeople() {
      return this.people.filter(
        (person) =>
          person.firstname
            .toLowerCase()
            .includes(this.search.toLowerCase().trim()) ||
          person.lastname
            .toLowerCase()
            .includes(this.search.toLowerCase().trim())
      );
    },
    sortedPeople() {
      return this.filteredPeople.sort((a, b) =>
        a[this.sortby].localeCompare(b[this.sortby])
      );
    },

---

添加 asc/dec 顺序：Link

sortedPeople() {
      return this.filteredPeople.sort((a, b) =>
        (this.sort == 'asc') ? a[this.sortby].localeCompare(b[this.sortby]) : b[this.sortby].localeCompare(a[this.sortby])
      );
    },