使用 vue.js 添加搜索功能答案

【问题标题】：Adding search functionality using vue.js使用 vue.js 添加搜索功能
【发布时间】：2020-02-10 18:52:50
【问题描述】：

我正在尝试使用 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())
            })
        }
    },

【问题讨论】：

我使用的是 Vue.JS 版本 2

标签： javascript html vue.js

【解决方案1】：

您正在使用 computed 道具作为函数。只需将其移至组件的 methods 部分即可。而且您可能会对事件道具感兴趣，因此您应该将 tableFilter 声明为：

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

【讨论】：