创建 Vue 搜索栏 |如何根据输入隐藏/显示数据？

Question

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

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

下面是我的代码的样子

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");
        }
    }
});

var app = new Vue({
  el: '#main',
  data: {
    tables: {},
    people: [],
    currentAlerts: [],
    lastDismissed: []
  },
  methods: {
    loadTables() {
        $.ajax({
          method: 'POST',
          dataType: 'json',
          url: base_url + 'users/getTableAssignments/' + event_id
        }).done(data => {
          this.tables = data; 
        });
    },
    loadPeople() {
        $.ajax({
            method: 'POST',
            dataType: 'json',
            url: base_url + 'users/getParticipants2/' + event_id
        }).done(data => {
            this.people = data;
            this.sortSidebar(this.people);
        });
    },
    loadCurrentAlerts() {
        $.ajax({
            method: 'POST',
            dataType: 'json',
            url: base_url + 'alerts/getAlerts/' + event_id
        }).done(data => {
            this.currentAlerts = data;
        });
    },
    loadLastDismissed(num = 15)
    {
        $.ajax({
            method: 'POST',
            dataType: 'json',
            url: base_url + 'alerts/getLastDismissed/' + event_id + '/' + num
        }).done(data => {
            this.lastDismissed = data;
        });
    },
    setRefresh() {
        setInterval(() => {
            console.log("Getting People and Tables");
            this.loadPeople();
            this.loadTables();
        }, 100000);             
    },
    makeTablesDraggable() {
        $(document).on("mouseenter", '.table', function(e){
         var item = $(this); 
         //check if the item is already draggable
         if (!item.is('.ui-draggable')) {
                 //make the item draggable
                 item.draggable({
                    start: (event, ui) => {
                        console.log($(this));
                    }
                 });
          }
        });
    },
    makePeopleDraggable() {
         $(document).on("mouseenter", '.person', function(e){
         var item = $(this); 
         //check if the item is already draggable
         if (!item.is('.ui-draggable')) {
                 //make the item draggable
            item.draggable({
                appendTo: 'body',
                containment: 'window',
                scroll: false,
                helper: 'clone',
                start: (event, ui) => {
                    console.log($(this));
                }
            });
          }
        });       
    }
    makeDroppable() {
        $(document).on("mouseenter", ".dropzone, .table", function(e) {
            $(this).droppable({
                drop: function(ev, ui) {
                    console.log("Dropped in dropzone");
                }
            });
        });
    }
 },
  mounted() {
    this.loadTables();
    this.loadPeople();
    this.loadCurrentAlerts();
    this.loadLastDismissed();
    this.setRefresh();
    this.makeTablesDraggable();
    this.makePeopleDraggable();
    this.makeDroppable();
  }

<head>
	<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> 
</head>
<div id="app">
    <sidebar :people="people" :tables="tables"></sidebar>
</div>

Answer 1

您可以将侧边栏中的 people 属性更改为计算属性，该属性将根据用户的输入进行计算。

所以把侧边栏代码改成

<div v-for="person in filteredPeople" :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>

并添加一个计算属性

computed: {
    filteredPeople () {
        // Logic to filter data
    } 
}

Answer 2

我使用的一种愚蠢的方法，没有计算属性：

JS：

new Vue({
  el: '#app',
  data: {
    list: [],
    filteredList: []
  },
  mounted(){
    this.filteredList = this.list
  },
  methods: {
    filter(e){
      if(e.target.value === '') this.filteredList = this.list
      else {
        this.filteredList = []
        this.list.forEach(item=>{
          if(list.name.includes(e.target.value)) this.filteredList.push(item)
        })
      }
    }
  }
})

列表对象的“名称”属性可以更改为您要查找的任何属性。

HTML：

<input @keyup="filter" id="search" type="search" required>