php - 使用卡片 vue 显示数据的搜索过滤器
问题描述
我使用卡片来显示数据库中的数据,我想实现一个搜索过滤器来根据用户类型过滤数据。我不知道该怎么做,所以我只是按照 W3school 的一些教程进行操作。代码不起作用。到目前为止,这就是我所做的:
Vue 组件
<table class="table col-md-12" style="background-color:white;">
<thead class="thead white" style="background-color:#3F51B5">
<th>Unassigned
<input class="form-control w-50 float-right" type="text" id="myInput">
</th>
</thead>
<tbody>
<div class="card col-md-11 mt-3 mx-auto" v-for="(uStudent,index) in uStudents" v-bind:key="uStudent.student_id" id="myList">
<div class="card-body">
<div class="row">
<h6 class="card-subtitle text-muted col-md-1 my-auto">#{{index+1}}</h6>
<h6 class="card-subtitle text-muted col-md-2 my-auto">{{uStudent.student_id}}</h6>
<h6 class="card-subtitle text-muted col-md-6 my-auto">{{uStudent.student_name}}</h6>
<h6 class="card-subtitle text-muted col-md-2 my-auto">{{uStudent.company_state}}</h6>
<a href="" class="col-md-1" @click="setLectureFK(uStudent.student_id)"><i class="fas fa-user-plus"></i></a>
</div>
</div>
</div>
</tbody>
脚本
<script>
export default {
data () {
return {
uStudents:[],
}
},
methods:{
getUnassignedStudents(){
axios.get(`/api/internship/unassignedStudents/${this.$route.params.id}`).then(response => this.uStudents = response.data);
},
filter(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myList").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
}
},
mounted() {
this.filter();
console.log('Component mounted.')
}
}
解决方案
Vue 有事件监听器,你可以直接在 DOM 中使用。因此,您可以在输入字段上使用v-model属性将用户提供的值实时绑定到变量,而不是创建一个函数“过滤器”并在挂载时运行它this.filter
您可以使用该变量创建一个返回过滤数据的计算函数。然后,您可以使用计算函数更改“uStudents”并在 v-for 中使用它。
我将在下面提供一个示例
编辑:链接过滤器有时是合适的,但我认为在这个例子中,最好将整个逻辑写在过滤器的回调函数中。
所以代替默认值
this.uStudents.filter(user => user.student_name.toUpperCase().includes(this.filter.toUpperCase()))
请参阅下面的代码示例,如何在一个过滤器中实现多个过滤条件。
new Vue({
el: '#app',
data() {
return {
uStudents: [
{student_id: 1, student_name: 'Alex', company_state: 'Ohio'},
{student_id: 2, student_name: 'Jane', company_state: 'Alabama'},
],
filter: ''
}
},
computed: {
filteredStudents() {
return this.uStudents.filter(user => {
const filter = this.filter.toUpperCase();
const hasIdMatch = String(user.student_id).includes(filter);
const hasNameMatch = user.student_name.toUpperCase().includes(filter);
return hasIdMatch || hasNameMatch;
})
}
},
methods: {
getUnassignedStudents() {
axios.get(`/api/internship/unassignedStudents/${this.$route.params.id}`).then(response => this.uStudents = response.data);
},
},
mounted() {
console.log('Component mounted.')
}
})
.row {
display: flex;
justify-content: space-between;
max-width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table class="table col-md-12" style="background-color:white;">
<thead class="thead white" style="background-color:#3F51B5">
<th>Unassigned
<input class="form-control w-50 float-right" type="text" id="myInput" v-model="filter">
</th>
</thead>
<tbody>
<div class="card col-md-11 mt-3 mx-auto" v-for="(uStudent,index) in filteredStudents" v-bind:key="uStudent.student_id" id="myList">
<div class="card-body">
<div class="row">
<h6 class="card-subtitle text-muted col-md-1 my-auto">#{{index+1}}</h6>
<h6 class="card-subtitle text-muted col-md-2 my-auto">{{uStudent.student_id}}</h6>
<h6 class="card-subtitle text-muted col-md-6 my-auto">{{uStudent.student_name}}</h6>
<h6 class="card-subtitle text-muted col-md-2 my-auto">{{uStudent.company_state}}</h6>
<a href="" class="col-md-1" @click="setLectureFK(uStudent.student_id)"><i class="fas fa-user-plus"></i></a>
</div>
</div>
</div>
</tbody>
</table>
</div>
推荐阅读
- ruby-on-rails - Sidekiq 作业在其他作业运行时随机冻结
- django - 如何提示用户将 pdf 文件保存到 django 中的本地计算机?
- php - 如何在共享主机上使用 WebRTC 和 PHP 实现点对点文本聊天
- google-cloud-platform - 无论如何要在对话流中发起聊天吗?
- java - 如何通过使用索引指定数组位置来打印多维数组元素?
- python - 如何在列表中找到最频繁的
- mysql - 构建查询语句时的Python MYSQL异常
- node.js - 无法两次解析表单数据
- javascript - 如何在 HTML 上上传 pdf 文件并在 FLASK 后端进行处理?
- django-rest-framework - drf_yasg 和 amazon api 网关返回 json 而不是 html ui