使用 laravel api 搜索 vue.js答案

【问题标题】：search vue.js with laravel api使用 laravel api 搜索 vue.js
【发布时间】：2021-12-12 15:18:58
【问题描述】：

我正在尝试在元素列表中进行搜索，但是当我使用 vue js 创建函数时，我什么也没得到，在下面的代码中，您可以看到我得到了列表并成功地将其显示在表格中，但是当我尝试时进行搜索并将结果放入新列表中，我没有任何帮助吗？

<template>
<div class="kt-portlet">

    <div class="kt-portlet__body">
       
        <!--begin::Section-->
        <div class="kt-section">
            <label>
                <input type="text" v-model="searchTerm"  placeholder="Search Here">
            </label>

            <div class="kt-section__content">
                <table class="table" id="datatable">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>Product Title</th>
                        <th>Product Price</th>
                        <th>Created On</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="teacher in teachers.data" :key="teacher.id">
                        <td>{{teacher.id}}</td>
                        <td>{{teacher.name}}</td>
                        <td>{{teacher.email}}</td>
                        <td>{{teacher.name}}</td>
                    </tr>

                    </tbody>
                </table>
            </div>
            <div class="row ">
                <div class="">
                    <pagination :data="teachers" @pagination-change-page="getTeachers"></pagination>
                </div>
            </div>
        </div>
    </div>
</div>

export default {
    data() {
        return {
            teachers:{},
            searchTerm:'',
            employees:{}

        }
    },
    computed:{
        filterSearch(){
            return this.teachers.filter((teacher) => {
                return this.employees = teacher.name.match(this.searchTerm);
            })
        }
    },
    methods:{
       getTeachers(page = 1) {
            axios.get("/api/teachers?page=" + page )

                .then((response)=>
                {
                    this.teachers = response.data;
                })
        }
    },
    mounted(){
        this.getTeachers();
    },


}

【问题讨论】：

您分配的 filterSearch() 方法内部不进行比较，即 this.employees = teacher.name.match(this.searchTerm);应该是 this.employees == teacher.name.match(this.searchTerm);或用 3 个等号严格比较 ===

标签： laravel vue.js components

【解决方案1】：

应该是

filterSearch(){
    return this.teachers.data.filter((teacher) => {
        return this.employees = teacher.name.match(this.searchTerm);
    })
}

teachers.data.filter vs. teachers.filter，因为你在 teachers 中保存了一个对象，而不是一个数组。我建议相反 - 让教师成为数组，并在 getTeachers() 方法中做 this.teachers = response.data.data

然后也将employees 属性设为数组。 B/c 在计算属性中过滤教师数组后，您将得到一个数组，而不是对象。

如果你遵循这条路线——将教师和员工都设为数组——那么你的计算属性不应该改变，它会像你一样工作

【讨论】：