使用带有子组件的 Vue 的搜索栏过滤器

Question

我正在创建一个动态搜索栏，它将根据用户输入过滤一个充满名称的侧边栏。但是，我无法根据搜索栏在 keyup 上的值暂时隐藏和显示数据。 “Vue 方式”实现这一目标的最佳方式是什么？

在 keyup 时，我想过滤所有 this.people 数据，只显示包含搜索输入值的名称。

下面是我的代码的样子

//Javascript
    Vue.component('sidebar',{
    props: ['people', 'tables'],
    data: () => {
        return {
            fullName: ''
        }
    },
    computed: {
        computed() {
            return [this.people, this.tables].join()
        }
    },
    template: 
    `
        <div id="sidebarContain" v-if="this.people">
            <input id="sidebar-search" type="text" placeholder="Search..." @keydown="searchQuery">
            <select id="sidebar-select" @change="sidebarChanged">
                <option value="AZ">A-Z</option>
                <option value="ZA">Z-A</option>
                <option value="notAtTable">No Table</option>
                <option value="Dean's Guest">Dean's Guest</option>
                <option value="BOO | VIP">BOO | VIP</option>
            </select>
            <div v-for="person in people" :class="[{'checked-in': isCheckedIn(person)}, 'person']" :id="person.id" :style="calcRegColor(person)">
                <span v-if="person.table_name">{{person.first_name + ' ' + person.last_name + ' - ' + person.table_name}}</span>
                <span v-else>{{person.first_name + ' ' + person.last_name}}</span>
            </div>
        </div>
    `,
    methods: {
        isCheckedIn(person) {
           return person.reg_scan == null ? true : false;
        },
        isHidden(person)
        {
            console.log("here");
        },
        calcRegColor(person)
        {
            switch(person.registration_type)
            {
                case "Dean's Guest" :
                    return {
                        color: 'purple'
                    }
                    break;
                case "BOO | VIP" :
                    return {
                        color: 'brown'
                    }
                    break;
                case "Student" :
                    return {
                        color: 'green'
                    }
                    break;
                case "Faculty":
                case "Staff":
                    return {
                        color: 'blue'
                    }
                    break;
                case "Alumni Club Leader":
                    return {
                        color: 'gold'
                    }
                    break;
                case "Table Guest" :
                    return {
                        color: 'pink'
                    }
                    break;
                default: 
                    return {
                        color: 'black'
                    }
            }
        }
    },
    watch: {
        computed() {
            console.log("People and Tables Available");
        }
    }
});

//HTML
<div id="app">
    <sidebar :people="people" :tables="tables"></sidebar>
</div>

Answer 1

这是在 Vue 中实现这一目标的策略：

A.将不同的属性与 v-for 一起使用，而不是 props.people，比如myPeople。

<div v-for="person in myPeople"> 

B.使用 v-model 保存您的 searchQuery：

<input id="sidebar-search" ... v-model="searchQuery">

...

// Include searchQuery in data so it is reactive.
data: () => {
  return {
    fullName: '',
    searchQuery: ''
  }
}

C.当 searchQuery 改变时计算 myPeople

computed: {
  myPeople: function () {
    return this.people.filter((p) => {
       // something based on `searchQuery`
    });
  }
}

Vue docs 对这类事情的讨论时间更长。