创建 Vue 搜索栏 |如何根据输入隐藏/显示数据? [英] Creating Vue Search Bar | How to hide/show data based on input?
问题描述
我正在创建一个动态搜索栏，它将根据用户输入过滤一个充满名称的侧边栏.但是，我无法根据 keyup 上搜索栏的值暂时隐藏和显示数据.实现Vue 方式"的最佳方法是什么?
在 keyup 上，我想过滤所有 this.people 数据，只显示包含搜索输入值的名称.
下面是我的代码的样子
Vue.component('sidebar',{道具:['人'，'桌子']，数据:() =>{返回 {全名: ''}},计算:{计算(){返回 [this.people, this.tables].join()}},模板:`<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">无表</option><option value="Dean's Guest">Dean's Guest</option><option value="BOO | VIP">BOO |VIP</选择><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>`，方法: {isCheckedIn(人){返回 person.reg_scan == null ?真假;},isHidden(人){console.log("这里");},calcRegColor(人){开关(person.registration_type){案例院长的客人":返回 {颜色:'紫色'}休息;案例BOO | VIP":返回 {颜色:'棕色'}休息;案例学生":返回 {颜色:'绿色'}休息;案例学院":案例员工":返回 {颜色:'蓝色'}休息;案例校友会领袖":返回 {颜色:'金色'}休息;案例表客人":返回 {颜色:'粉红色'}休息;默认:返回 {颜色:黑色'}}}},手表: {计算(){console.log("人员和表格可用");}}});var app = new Vue({el: '#main',数据: {表:{}，人们: []，当前警报:[]，最后被解雇:[]},方法: {加载表(){$.ajax({方法:'POST'，数据类型:'json'，url: base_url + 'users/getTableAssignments/' + event_id}).完成(数据=> {this.tables = 数据；});},加载人(){$.ajax({方法:'POST'，数据类型:'json'，网址:base_url + 'users/getParticipants2/' + event_id}).完成(数据=> {this.people = 数据；this.sortSidebar(this.people);});},loadCurrentAlerts() {$.ajax({方法:'POST'，数据类型:'json'，url: base_url + 'alerts/getAlerts/' + event_id}).完成(数据=> {this.currentAlerts = 数据；});},loadLastDismissed(num = 15){$.ajax({方法:'POST'，数据类型:'json'，url: base_url + 'alerts/getLastDismissed/' + event_id + '/' + num}).完成(数据=> {this.lastDismissed = 数据；});},设置刷新(){setInterval(() => {console.log("获取人员和表格");this.loadPeople();this.loadTables();}, 100000);},makeTablesDraggable() {$(document).on("mouseenter", '.table', function(e){var item = $(this);//检查项目是否已经可以拖动if (!item.is('.ui-draggable')) {//使项目可拖动item.draggable({开始:(事件，用户界面)=>{console.log($(this));}});}});},makePeopleDraggable() {$(document).on("mouseenter", '.person', function(e){var item = $(this);//检查项目是否已经可以拖动if (!item.is('.ui-draggable')) {//使项目可拖动item.draggable({appendTo: '身体',遏制:'窗口'，滚动:假，帮手:'克隆'，开始:(事件，用户界面)=>{console.log($(this));}});}});}makeDroppable() {$(document).on("mouseenter", ".dropzone,.table", function(e) {$(this).droppable({下降:函数(ev，ui){console.log("掉在 dropzone");}});});}},安装(){this.loadTables();this.loadPeople();this.loadCurrentAlerts();this.loadLastDismissed();this.setRefresh();this.makeTablesDraggable();this.makePeopleDraggable();this.makeDroppable();}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script><div id="应用程序"><sidebar :people="people" :tables="tables"></sidebar>您可以将侧边栏中的 people 属性更改为计算属性，该属性将根据用户的输入进行计算.
因此将侧边栏代码更改为
<div v-for="person infilteredPeople" :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>