Search Bar Filter Using Vue with child component

Question

I am creating a dynamic search bar that will filter a sidebar full of names based on user input. However, I am having trouble temporarily hiding and showing data based on the search bar's value on keyup. What is the best way to achieve this the "Vue way"?

On keyup, I want to filter through all of the this.people data and only show names that contain the value of the search input.

Below is what my code looks like

//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

Here is a strategy to achieve this in Vue:

A. Use a different property with v-for instead of props.people, like myPeople.

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

B. Save your searchQuery with v-model:

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

...

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

C. Compute myPeople when searchQuery changes

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

The Vue docs have a longer discussion around this type of thing.