使用 laravel api 搜索 vue.js

Posted

技术标签:

【中文标题】使用 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 在计算属性中过滤教师数组后,您将得到一个数组,而不是对象。

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

【讨论】:

以上是关于使用 laravel api 搜索 vue.js的主要内容,如果未能解决你的问题,请参考以下文章

使用 laravel api 搜索 vue.js

Laravel 5.3 在 API 中过滤搜索数据

从角度 2 调用 laravel 后端 api

Laravel 5.1:如何使用 oauth2-server-laravel?

Laravel 5 REST API

Vue JS 对分页 Laravel 结果的实时客户端搜索过滤器