使用 laravel api 搜索 vue.js

Posted 2023-02-23

【中文标题】使用 laravel api 搜索 vue.js

【英文标题】：search vue.js with laravel api

【发布时间】：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 个等号严格比较 ===

【参考方案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 在计算属性中过滤教师数组后，您将得到一个数组，而不是对象。

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