使用 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的主要内容,如果未能解决你的问题,请参考以下文章