Adding search functionality using vue.js

Question

I am trying to add a search filter to my application using vue.js.

Error:
[Vue warn]: Error in v-on handler: "TypeError: handler.apply is not a function"

(found in <Root>)
warn @ vue.js:634

HTML:

<div id ="search">
<input type="text" name="Filter" class="input--search" v-model="query" v-on:keyup="tableFilter" placeholder="Filter By Name">
</div>

Vue.js

var userId = '@(user.Guid.ToString())';
var tenant = '@(Model.Tenant.RowKey)';
var classId = '@(Model.CLClass.Guid.ToString())';
var students = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Students));
var addStudentUrl = '@Url.Action("AddStudents", "Classes", new { id = Model.CLClass.Guid })';
var frameAccounts = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.FrameAccounts));
var allUsers = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.AllUsers));
var classHub = $.connection.classHub;
$.connection.hub.qs = { tenant: tenant, userid: userId, classid: classId, name: '@($"{user.FirstName} {user.LastName}")' };
var vclass = new Vue({
    el: '#main',
    data: {
        classHub: classHub,
        classId: '@(Model.CLClass.Guid.ToString())',
        userId: '@(user.Guid.ToString())',
        user: '@($"{user.FirstName} {user.LastName}")',
        tenant: tenant,
        students: students,
        form: {
            selectionIds: []
        },
        frameAccounts: frameAccounts,
        tenant: tenant,
        messages: [],
        message: '',
        showModal: false,
        users: allUsers,
        addStudentUrl: addStudentUrl,
        query: ''
    },
    computed: {
        tableFilter() {
            console.log("Started typing in search box")
            //return this.users.findBy(this.users, this.query, 'LastName')
            if (this.query == '') return this.users

            return this.users.filter(user => {
                return user.LastName.toLowerCase().includes(this.query.toLowerCase())
            })
        }
    },

Answer 1

You are using computed prop as function. Just move it to the methods section of your component. And also you probably will be interested in an event props so you should declare tableFilter as:

methods: {
  tableFilter(e) {
   /// your keyup handler code here
  }
}